使用gulp脚本配合TypeScript开发

Posted 2020-08-05

目标：编写TypeScript时，保存即生成js文件。

 

使用npm安装以下组件

• gulp
• gulp-rename
• through-gulp
• gulp-typescript

 

编写gulpfiles.js

 

var gulp = require("gulp");

var rename = require("gulp-rename");

var through = require("through-gulp");

var ts = require("gulp-typescript");

var gutil = require("gulp-util");

var fs = require("fs");

var path = require("path");

 

var taskFun = function (cb, filename)

{

    gulp.src(filename ? filename : ["**/*.ts", "!**/node_modules/**"])

        .pipe(through(function (file, encoding, callback)

        {

            gutil.log("[ts2js] " + file.path);

            this.push(file);

            callback();

        }))

        .pipe(ts())

        .pipe(rename(function (path)

        {

            path.ext = ".js";

        }))

        .pipe(gulp.dest(filename ? path.dirname(filename) : "."));

};

 

gulp.task("default", taskFun);

 

gulp.watch(["**/*.ts", "!**/node_modules/**"], function (e)

{

    if (fs.existsSync(e.path))

    {

        var stat = fs.statSync(e.path);

        if (stat.isFile())

            taskFun(null, e.path);

    }

});

 

 

执行脚本时把所有的*.ts文件生成一次，然后检测到有修改时生成对应的js。

只是当前gaze的Bug还比较多，在使用中经常掉链子，而gulp.watch()依赖此库，只能发现挂掉就重新运行下gulp。