Typescript学习之基于gulp+browserify+browser-sync等搭建自动化开发环境

这里就不介绍TypeScript到底是什么了，TypeScript是JavaScript的一个超集，但是我们在使用或者是学习的过程中，我们需要将写好的.ts文件编译成.js文件才可以使用，所以给一开始的学习过程增加了很多麻烦，所以也是我为什么要去搭建一个自动化的开发环境，这样可以节省很多时间在一些机械工作上。Typescript官网给出了一个官方的教程搭建环境，但还不足以满足我的需求，于是我需要自己在官网的基础上进行增加。
项目上传到了我的GitHub上项目GitHub地址
第一次进行流程构建，不好的地方希望大佬斧正。

首先我们确定一下我们的需求，那些地方需要自动化

一.确立需求
1.首先我们需要将.ts文件自动编译成.js文件
2.我们需要监测.ts文件的变化，如果发生变化，我们需要重新编译
3.在文件发生变化的时候，我们需要进行浏览器重载，来获取最新的文件
二.技术插件选取
这里选择了gulp作为整体的一个流程控制工具，browserify作为一个打包工具，browser-sync作为本地服务搭建
当然还有了一些其他的插件接下来的代码一一介绍

目录结构

，

直接上最后的代码

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');//进行格式解析，解析成vinyl
var tsify = require('tsify');//Browserify的一个插件访问typescript编译器
var sourcemaps = require('gulp-sourcemaps');//和sourcemaps有关
var buffer = require('vinyl-buffer');//和sourcemaps有关
var watchify = require("watchify");//browserify的插件，负责监听.ts文件变化
var gutil = require("gulp-util");//打印log
var browserSync = require('browser-sync');//开启本地服务
var reload = browserSync.reload; //重载
var babelpolyfill = require("babel-plugin-transform-runtime"); //babel有关的，当时用到ES7或ES6 generator
//等一些特性的时候需要，可以在babel官网了解下

//配置一些项目输入输出目录
var paths = {
    pages: ['src/*.html'],
};

//配置watchify
var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: ['src/main.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));

//建立task
gulp.task('copyHtml', function () {
    return copyHtml();
});
//将src下的html复制到dist目录下
function copyHtml() {
    return gulp.src(paths.pages)
        .pipe(gulp.dest('dist'))
        .pipe(reload({stream:true}));//重载
}
//将js文件模块打包到一起
function bundle() {
    return watchedBrowserify
        .transform('babelify', {//使用babel
            presets: ['es2015'], 预设是es2015也就是我们说的ES6
            extensions: ['.ts']//需要手动识别一下.ts文件，babel默认不识别
        })
        .bundle()//必须的一个，向update发出emit事件，否则下面的update是没用的，github上有介绍
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'))
        .pipe(reload({stream:true}));//重载

}

//开启服务器，我这里开的是静态服务器
gulp.task('serve', function() {
    browserSync.init({
        server:{
            baseDir:'./',  // 设置服务器的根目录
            index:'dist/index.html' // 指定默认打开的文件
        },
        port:8050  // 指定访问服务器的端口号
    });
})

gulp.task('default', ['copyHtml','serve'], bundle);//在终端输入gulp默认执行的任务

gulp.watch(paths.pages,['copyHtml'])//观察html文件变化


watchedBrowserify.on("update", bundle);//监听.ts变化
watchedBrowserify.on("log", gutil.log);//当文件更改是，打印日志

关于这里使用babel，这里说一下，为什么用了ts为什么需要再用babel，因为有一些es6或更高的版本，ts是无法识别的，所以我们需要将TypeScript目标设置为ES2015。 Babel稍后会从TypeScript生成的ES2015代码中生成ES5，至于上面引入的
var babelpolyfill = require(“babel-plugin-transform-runtime”); //其实不应该在这里引入，但现在暂时在这里引入，一些新的特性，我们需要引入额外的包才可以使用，例如es6的generator
关于babel我们一共需要引入

babelify //babel在browserify工具下的插件包
babel-preset-es2015 //es2015版本预设
babel-core //babel核心包
babel-plugin-transform-runtime //额外的包

配置文件如下
tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs", //模块规则
    "target": "es2015", //目标版本
    "sourceMap": true //是否包含sourceMap
  },
  "exclude": [
    "node_modules" //忽略文件
  ],
  "files": [
    "src/main.ts" //编译文件
  ]
}

.babelrc别忘了前面的.

{
    "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",
  "devDependencies": {
    "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",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-typescript": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "tsify": "^3.0.4",
    "typescript": "^2.7.1",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.10.0"
  }
}