使用gulp构建TypeScript项目

使用Gulp构建TypeScript，在Gulp管道里添加Browserify， uglify或Watchify。 它还包涵了 Babel的功能，通过使用Babelify。
Watchify 启动Gulp并保持运行状态，当你保存文件时自动编译。 帮你进入到编辑-保存-刷新浏览器的循环中。
Browserify 把这个工程由Node.js环境移到浏览器环境里。 把所有模块捆绑成一个JavaScript文件。
Uglify 帮你压缩代码，将花费更少的时间去下载它们。
参考Typescript中文网·Gulp

文件结构

myProject
|--src
    |--index.html
    |--ts
    |--css
|--dist
|--package.json
|--gulpfile.js
|--tsconfig.json

package.json

{
  "name": "tsPlayGround",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-cli": "^2.0.1",
    "gulp-typescript": "^5.0.0-alpha.3",
    "gulp-util": "^3.0.8",
    "typescript": "^3.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.11.0"
  },
  "devDependencies": {
    "browserify": "^16.2.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "tsify": "^4.0.0",
    "vinyl-buffer": "^1.0.1"
  }
}

gulpfile.js

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var watchify = require("watchify");
var tsify = require("tsify");
var gutil = require("gulp-util");
var uglify = require('gulp-uglify');
var paths = {
  pages: ['src/*.html']
};
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');

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

gulp.task("copy-html", function () {
  return gulp.src(paths.pages)
    .pipe(gulp.dest("dist"));
});

function bundle() {
  return watchedBrowserify
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({
      loadMaps: true
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist"));
}

gulp.task("default", ["copy-html"], bundle);
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

tsconfig.json

{
  "files": [
    "src/main.ts"
  ],
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es3"
  }
}

步骤

1. 建立文件夹及上面三个文件。
2. src文件夹中建立main.ts文件
3. 在根目录npm初始化 npm init
4. 在根目录下npm install 安装依赖包
5. gulp 命令构建，构建后gulp会保持运行状态
6. 每次保存文件后gulp会通过watchedBrowserify插件自动生成编译， 在浏览器中手动刷新可看到结果