TypeScript + Browserify + SourceMaps in Gulp?

Question

嗨，这个问题困扰着我。

我想知道，在从TS编译并使用Browserify之后，我是否可以让我的SourceMaps（从gulp-SourceMaps）一直指向我的TS文件。

目前我有它的工作，所以我使用tsify编译TS，然后我把它全部捆绑到all.js中，然后把uglify（minify）它捆绑到all.min.js中。我也有SourceMaps，但只是从缩小版映射到all.js.

我找了很多这个。我以前也做过从JS缩小到TS的SourceMaps，但在这种情况下我没有使用Browserify。

我当前的Gulp任务：

gulp.task('scripts', function(){
    return browserify(paths.mainJs)
        .plugin(tsify)
        .bundle()
        .on('error',console.error.bind(console))
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

请注意，这里的一个大问题是，sourcemaps调用之间的所有内容都需要支持gulp-sourcemaps，而Browserify没有。Gulp也有Typescript编译器，但我该如何使用Browserify？

谢谢！

Answer 1

我想通了！！下班后。。。。

这就是：

    gulp.task('scripts', function(){
    return browserify(paths.mainTs,{debug: true})
        .on('error',console.error.bind(console))
        .plugin(tsify)
        .bundle()
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

paths.mainTs是入口TS文件（main.TS、index.TS、app.TS等）。

debug标志告诉Browserify编写源映射。

然后我在缩小之前加载这些地图，然后将它们写在最低版本上。

请注意，如果您在调试时使用完整的js，而不是minimied，那么您可以跳过带有源映射的两行。

EDIT：为了避免最后出现一个大的JS文件（因为它包括内联源映射），只需要sourcemaps.write（'/somePath'）.