Gulp中的TypeScript + Browserify + SourceMaps？

Question

Hi this issue is stumping me.

I want to know if, after compiling from TS and using Browserify, I can get my SourceMaps (from gulp-sourcemaps) to point all the way back to my TS files.

Currently I have it working so that I use tsify to compile the TS then I bundle it all into an all.js then uglify (minify) it into an all.min.js. I also have the SourceMaps but only to map from the minified version to the all.js.

I have searched quite a bit for this. I have also done the SourceMaps before from JS minified to my TS but I was not using Browserify in that case.

My current working Gulp task:

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));
});

Note that a big issue here is that everything between the sourcemaps calls need to have support for gulp-sourcemaps, which Browserify does not. Gulp does have a Typescript compiler as well but then how would I use Browserify?

Thanks!

Answer 1

I figured it out!! After hours....

This is it:

    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 is the entry TS file (main.ts, index.ts, app.ts, whatever).

The debug flag tell Browserify to write source maps.

I then load those maps before minifying and then write them on the min version.

Note that if you're using the full js, rather than minified, while debugging then you can just skip the two lines with sourcemaps.

EDIT: To avoid a large JS file at the end (since it includes inline sourcemaps), just sourcemaps.write('/somePath').