How to build a typescript development environment using Gulp

Install gulp globally

Yarn Global add gulp-cli or NPM I gulp-cli -gCopy the code

Create a project directory, such as proj, go into the proj directory, initialize the project, and generate package.json files.

Yarn init-y or NPM init-yCopy the code

Create SRC (source file directory), output(compile package output) directories in the project directory, and create index.html, main.ts files in SRC directory, such as less create index.less file, or directly index.css, or index.sass

output
- Ts //. Ts compiles to the js output directory
src
- index.html
- main.ts
- index.less

Install dependencies (development dependencies)
- Cross-env: Sets the Node environment.
- Gulp: gulp command line tool to create gulp tasks and run them.
- Typscript: Typsscript supports compiling.ts files into.js files
- Gulp-typescript: A typescript gulp plugin that allows gulp to process typescript files.
- Browserify: Finally packaged as a bundle.js file
- Watachify: File listening, recompiling the package when the file to listen for changes.
- Gulp-inject: injects. CSS or. Js files into templates.
- Tsify: Tsify is a plugin for Browserify that, like gulp-typescript, has access to the typescript compiler.
- vinyl-buffer: Read a Stream of vinyl objects and encapsulate all the contents of the vinyl object in the Stream (i.e., contents property) into a Buffer. Return the same vinyl object, but replace its contents with a wrapped Buffer.
- Vinyl-source-stream: Used to wrap a stream into a vinyl object. That is, create a vinyl object, give it a file name, and set its contents to the stream. It is important to note that due to encapsulate the stream itself is only a stream, not a file, so here the specified file name is arbitrarily specified by the user, can be said to be false name, but the false names can also be downstream of the output stream using, for example, using the vinyl object file name and path will write the actual file system
- Gulp-sourcemaps: gulp plug-in for sourcemaps, which generates.js,.ts source files after conversion.
- Gulp-if: indicates that gulp enters the judgment
- Gulp-babel: The gulp plugin for Babel is a toolchain used to convert ECMAScript 2015+ code into backward-compatible versions of JavaScript code in older browsers or environments.
- Gulp-autoprefixer: a gulp plug-in for Autoprefixer that automatically adds the prefixes of CSS browsers.
- Gulp-less: gulp plug-in for less to convert less to CSS.

Initialize the TS project configuration file tsconfig.json and configure it accordingly

tsc init
Copy the code

{
  "files": [
    "src/main.ts"]."compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true, /* Enable incremental compilation */
    "target": "es2015"./* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs"./* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [], /* Specify library files to be included in the compilation. */
    // "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true, /* Report errors in .js files. */
    // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true, /* Generates corresponding '.map' file. */
    // "outFile": "./", /* Concatenate and emit output to single file. */
    // "outDir": "./", /* Redirect output structure to the directory. */
    // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true, /* Enable project compilation */
    // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
    // "removeComments": true, /* Do not emit comments to output. */
    // "noEmit": true, /* Do not emit outputs. */
    // "importHelpers": true, /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true./* Enable all strict type-checking options. */
    "noImplicitAny": true./* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true, /* Enable strict null checks. */
    // "strictFunctionTypes": true, /* Enable strict checking of function types. */
    // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true, /* Report errors on unused locals. */
    // "noUnusedParameters": true, /* Report errors on unused parameters. */
    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
    // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [], /* List of folders to include type definitions from. */
    // "types": [], /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true./* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true./* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */}}Copy the code

The contents of the index. HTML file are as follows, and the position to be injected into the. CSS and. Js files needs to be specified:


      
<html>
<head>
  <title>index</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome = 1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <! -- inject:css -->
  <! -- endinject -->
</head>
<body>
  <div id="app"></div>
  <p id="greeting">Loading...</p>

<! -- inject:js -->
<! -- endinject -->
</body>
</html>
Copy the code

SRC /main.ts, SRC /greets. Ts files contain the following contents:

// src/main.ts
import { sayHello } from './greet';

function showHello(domName: string, name: string) {
  const elt = document.getElementById(domName) as HTMLElement; 
  elt.innerText = sayHello(name);
}

showHello('greeting'.'TypeScript');
Copy the code

// src/greet.ts
export function sayHello(name: string) {
  return `Hello from ${name}`;
}
Copy the code

Index. less just write the corresponding style

Gulpfile. js file, this is the focus

const fs = require('fs'),
      path = require('path'),
      browserify = require('browserify'),
      watchify = require('watchify'),
      gulp = require('gulp'),
      inject = require('gulp-inject'),
      source = require('vinyl-source-stream'),
      buffer = require('vinyl-buffer'),
      gif = require('gulp-if'),
      uglify = require('gulp-uglify'),
      sourcemaps = require('gulp-sourcemaps'),
      babel = require('gulp-babel'),
      autoprefixer = require('gulp-autoprefixer'),
      less = require('gulp-less');
const ts = require('gulp-typescript'),
      tsProject = ts.createProject('tsconfig.json'),
      tsify = require('tsify');

const isProduction = /production/.test(process.env.NODE_ENV);

// Process.js files
function bundleJs( ) {
  const b = browserify({
    entries: ['./src/index.js'].cache: {},
    packageCache: {},
    plugin: [watchify]
  });

  b.on('update', bundle);
  bundle();

  function bundle() {
    b.bundle().on('error'.console.error)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(babel({presets: ['@babel/env']}))
    .pipe(sourcemaps.write('. '))
    .pipe(gif(isProduction, uglify()))
    .pipe(gulp.dest('./output/'));
    // .pipe(fs.createWriteStream('./output/bundle.js'));}}function injectFun() {
  const target = gulp.src('./src/index.html');
  const sources = gulp.src(['./output/**/*.js'.'./output/**/*.css'] and {read: false}, {relative: true});

  target.pipe(inject(sources))
  .pipe(gulp.dest('./output'));

}

function lessTask() {
  gulp.src('./src/**/*.less') .pipe(gif(! isProduction, sourcemaps.init())) .pipe(less({paths: [path.join(__dirname, 'less'.'includes')]})) .pipe(autoprefixer()) .pipe(gif(! isProduction, sourcemaps.write())) .pipe(gulp.dest('./output'))}function defaultTask( cb ) {
  bundleJs();
  handleTs();
  cb();
}

function handleTs() {
  const b = browserify({
    entries: ['./src/main.ts'].cache: {},
    packageCache: {},
    plugin: [watchify, tsify]
  })

  b.on('update', bundle);
  bundle();

  function bundle() {
    b.bundle().on('error'.console.error)
    .pipe(source('bundleTs.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(babel({presets: ['@babel/env']}))
    .pipe(sourcemaps.write('. '))
    .pipe(gif(isProduction, uglify()))
    .pipe(gulp.dest('./output/ts'))}}exports.default = gulp.parallel(gulp.series(defaultTask, injectFun), lessTask);
Copy the code

Write the script in the package.json”script” tag

"scripts": {
    "start": "cross-env NODE_ENV=development gulp",
    "build": "cross-env NODE_ENV=production gulp"
  },
Copy the code

Finally, enter YARN start on the CLI, run gulp task, and listen for the corresponding file. Open the index. HMTL file in the browser.

address

How to build a typescript development environment using Gulp

How to build a typescript development environment using Gulp

Gulpfile. js file, this is the focus

Related Posts

The React component library research Button

Joining the wangEditor development team for 2 months, my feelings

Blog set up | LeanCloud review system