编译typescript的方法有很多,但是如果你已经在使用gulp工作流的话,整合编译任务到gulp中是非常不错的选择。

我们使用gulp-typescript这个gulp插件项目来生成typescript。

1
2
3
npm install --global gulp
npm install gulp
npm install gulp-typescript typescript

简单示例:

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp');
var ts = require('gulp-typescript');
gulp.task('default', function () {
return gulp.src('src/**/*.ts')
.pipe(ts({
noImplicitAny: true,
out: 'output.js'
}))
.pipe(gulp.dest('built/local'));
});

这里直接在ts函数中传入对应配置。根据typescript官方文档,一般typescript工程都有一个tsconfig.json配置文件。我们想导入这个配置也是可以的:

1
2
3
4
5
6
7
8
var tsProject = ts.createProject('tsconfig.json');
gulp.task('scripts', function() {
var tsResult = gulp.src("lib/**/*.ts") // or tsProject.src()
.pipe(tsProject());
return tsResult.js.pipe(gulp.dest('release'));
});

不过需要注意的是,gulp-typescript不会使用tsconfig.json中的sourceMap配置项。所以生成的代码默认是不带source map的。这个是因为gulp-typescript想更多的兼容gulp生态的设计风格。在gulp生态中,生成sourceMap一般交由别的插件来完成。gulp-typescript推荐的是gulp-sourcemaps。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp = require('gulp')
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('scripts', function() {
return gulp.src('lib/*.ts')
.pipe(sourcemaps.init()) // This means sourcemaps will be generated
.pipe(ts({
// ...
})).js
.pipe( ... ) // You can use other plugins that also support gulp-sourcemaps
.pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest('release/js'));
});

在gulp-typescript流之前使用pipe(sourcemaps.init()),在流之后使用pipe(sourcemaps.write())就可以生成sourcemap了。默认会生成inline sourcemap,也就是sourcemap和编译后的代码在同一个文件中。

默认生成的inline sourcemap没有携带足够的调试信息,我在调试的时,vscode在断点处提示和生成的代码对不上,无视断点。

第一,我们需要在独立的文件中生成sourcemap,sourcemaps.write("./maps"),第二,我们需要设置sourceRoot,指定源码所在的目录:

1
2
3
4
5
6
7
8
9
10
11
gulp.task('typescriptForTest', function () {
return gulp.src(["./lib/**/*.ts*", "./test/**/*.ts"], { base: "./" })
.pipe(sourcemaps.init())
.pipe(tsProject()).js
.pipe(sourcemaps.write("./maps", {
sourceRoot: function (file) {
return p.join(file.cwd, 'lib');
}
}))
.pipe(gulp.dest("test-out/"));
});

这样的生成的sourcemap的属性和源码就对上了,调试OK!