Typescript learning based on Gulp+browserify+browser-sync and other building automation development environment

This is not about what typescript is, Typescript is a superset of JavaScript, but in the process of using or learning, We need to compile a well-written. ts file into a. js file before it can be used, so it adds a lot of trouble to the beginning of the learning process, so it's why I have to build an automated development environment that can save a lot of time on some mechanical work. Typescript official website gave a formal environment, but not enough to meet my needs, so I need to build on the official website to increase.
Project uploaded to my github project GitHub address
The first time to build a process, the bad place hope the big guy treatise.

First we identify our needs, and those places need automation.

I. Establishment of DEMAND
1. First we need to automatically compile the. ts file into a. js file
2. We need to monitor the changes in. ts files, and if they change, we need to recompile
3. When the file changes, we need to do a browser reload to get the latest files
Two. Technology plugin selection
Here Gulp is selected as a Process Control tool for the whole, browserify as a packaging tool, Browser-sync as a local service building
And, of course, some other plugins. The following code describes

directory Structure

，

directly on the last code

var gulp = require (' gulp ');
var browserify = require (' browserify '); var Source = require (' Vinyl-source-stream ');//format parsing, parsing to vinyl var tsify = require (' tsify ');// A plugin for browserify accesses the typescript compiler var sourcemaps = require (' gulp-sourcemaps ');//and sourcemaps about var buffer = require (' Vinyl-buffer ');//And sourcemaps about var watchify = require ("watchify");//browserify plug-in, responsible for monitoring. ts file change var gutil = require (" Gulp-util ");//print log var Browsersync = require (' Browser-sync ');//start Local Service var reload = Browsersync.reload; overloaded var Babelpolyfill = require ("Babel-plugin-transform-runtime");

Babel related, at that time used to ES7 or ES6 generator//And other characteristics of the time required, you can learn under the Babel//configuration of some projects input and output directory var paths = {pages: [' src/*.html '],}; Configure watchify var watchedbrowserify = watchify (browserify ({basedir: '. ', debug:true, entries: [' src/main.ts ']

, cache: {}, Packagecache: {}}). Plugin (tsify));
Establish task Gulp.task (' copyhtml ', function () {return copyhtml ();}); Copy the HTML under SRC to the Dist directory under function copyhtml () {return gulp.src (paths.pages). Pipe (Gulp.dest (' dist ')). Pipe (Reload ({stream:true}));//reload}//Package JS file module together with function bundle () {return watchedbrowserify. Transform (' babelify ', {//Use Babel presets: [' es2015 '], presets are es2015 that's what we're talking about. ES6 extensions: ['. ts ']//need to manually identify the. ts file, Babel is not recognized by default}. Bundle ()//must be one that sends an emit event to the update, or the following upd Ate is useless, there is a description on GitHub. Pipe (Source (' bundle.js ')). pipe (buffer ()). Pipe (Sourcemaps.init ({Loadmaps:tru

e}). Pipe (Sourcemaps.write ('./')). Pipe (Gulp.dest (' dist ')). Pipe (Reload ({stream:true}));//Reload} Open the server, I am driving a static server Gulp.task (' Serve ', function () {browsersync.init ({server:{baseDir: './'),//
Set the root directory of the server index: ' dist/index.html '//Specify default Open File}, port:8050//Specify the port number of the Access server}); }) Gulp.task (' Default ', [' copyhtml ', ' serve '], bundle);//The Task Gulp.watch (paths.pages,[' copyhtml ') in the terminal Input Gulp default)// Watch the HTML file change Watchedbrowserify.on ("Update", ///monitoring. TS change Watchedbrowserify.on ("Log", gutil.log);//When the file changes Yes, print the log
 

About using Babel here, here's why TS need to use Babel, because there are some es6 or higher, TS is not recognized, so we need to set the typescript target to ES2015. Babel will later generate ES5 from the ES2015 code generated by typescript, as
var Babelpolyfill = require ("Babel-plugin-transform-runtime"); Actually should not be introduced here, but now for the time being introduced here, some new features we need to introduce additional packages before they can be used, such as ES6 's generator
About Babel we need to bring in altogether

Babelify//babel browserify Tool plug-in package
babel-preset-es2015//es2015 version presets
babel-core//babel Core Pack
Babel-plugin-transform-runtime//Extra bags

The configuration file is as follows
Tsconfig.json

{"
  compileroptions": {
    "module": "Commonjs",//Module rule
    "target": "es2015",//target version
    "Sourcemap": TRUE// Whether it contains Sourcemap
  },
  "Exclude": [
    "node_modules"//Ignore file
  ], "Files
  ": [
    "src/main.ts"//Compile file
  ]
}

. BABELRC don't forget the front.

{"
    presets": ["es2015"],
    "plugins": [[
        "Transform-runtime",
        {
            "helpers": false,
            "Polyfill ": false,
            " regenerator ": True,
            " ModuleName ":" Babel-runtime "
        }
    ]]
}

Package.json

{"name": "Tstest", "Version": "1.0.0", "description": "", "Main": "Index.js", "scripts ": {" test ":" Echo \ "Error:no test specified\" && exit 1 "}," Author ":" "," License ":" ISC "," Devdepe Ndencies ": {" Babel-core ":" ^6.26.0 "," Babel-plugin-transform-runtime ":" ^6.23.0 "," babel-preset-es2015 ":" ^6. " 24.1 "," babelify ":" ^8.0.0 "," Browser-sync ":" ^2.23.6 "," browserify ":" ^16.0.0 "," Gulp ":" ^3.9.1 "," gu Lp-sourcemaps ":" ^2.6.4 "," Gulp-typescript ":" ^4.0.1 "," gulp-uglify ":" ^3.0.0 "," Gulp-util ":" ^3.0.8 "," TS Ify ":" ^3.0.4 "," typescript ":" ^2.7.1 "," Vinyl-buffer ":" ^1.0.1 "," Vinyl-source-stream ":" ^2.0.0 "," Watchi FY ":" ^3.10.0 "}}