Gulp中的TypeScript + Browserify + SourceMaps？

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,等等).

调试标志告诉Browserify编写源映射.

然后我在缩小之前加载这些地图,然后在最小版本上写下它们.

请注意,如果您在调试时使用完整的js而不是minified,那么您可以跳过包含sourcemaps的两行.

编辑:为了避免最后的大型JS文件(因为它包含内联源图),只需要sourcemaps.write('/ somePath').