Question

嗨，这个问题困扰着我。

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

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

我为此搜索了很多。之前我已经完成了SourceMaps，从JS缩小到我的TS，但在那种情况下我没有使用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));
});

请注意，这里的一个大问题是源映射调用之间的所有内容都需要支持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而不是minified，那么你可以跳过包含源图的两行。

编辑：为了避免最后的大型JS文件（因为它包含内联源图），只需要sourcemaps.write（'/ somePath'）。

Gulp中的TypeScript + Browserify + SourceMaps？

1 个答案: