Source maps using gulp, Browserify, reactify, UglifyJS

Question

I'm trying to get source maps for my JavaScript files working with Chrome. The problem with the current gulp script is that the source maps (that Browserify creates) lead to minified versions of files.

For example, let's say that app.jsx is an entry file for Browserify and it has require('a') and require('b') calls in it. app.jsx gets browserified, reactified and uglifyied and written to app.js as expected. However, all of the source maps references within module a and module b are also minified:

var gulp = require('gulp'),
    browserify = require('browserify'),
    watchify = require('watchify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    bundler;

bundler = browserify({
    entries: '/app.jsx',
    cache: {},
    packageCache: {},
    fullPaths: true
});

bundler
    .transform('reactify');
    .transform({
        global: true
    }, 'uglifyify');

bundler = watchify(bundler);
bundler.on('update', function() {
    return bundler
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('/js'));
});

Any ideas of how to get this working?

Answer 1

It looks like it's an issue with uglifyify (https://github.com/hughsk/uglifyify/issues/16). It seems it just doesn't know how to generate source maps.

There are some alternatives:

1. Uglify after bundling with the gulp-uglify plugin and the gulp-sourcemaps plugin. Unfortunately this is slightly less optimal since it won't remove dead require statements.

2. Create separate development and distribution builds. You can then generate source maps for your development build without uglification. Your distribution build could be uglified with no source maps.