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?

Justin Howard · Accepted Answer · 2014-12-08 22:07:22Z

3

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:

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.
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.

answered Dec 8, 2014 at 22:07

Justin Howard

5,6421 gold badge25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adrian Adkison Over a year ago

The problem with 1. is browserify inlines the sourcemap into the file and then uglify strips the comment. I opted for 2, which I dont love because you are not constantly testing code the way it gets run in production but that category of errors rarely happen in my experience.

Justin Howard Over a year ago

You need to tell gulp sourcemaps to read the existing maps. sourcemaps.init({loadMaps: true})

Adrian Adkison Over a year ago

Ah I thought that wouldnt work for inline source maps but upon reading the documentation you are most certainly correct. However, I still would want to use the more optimal minification strategy for deployment which means I am going to have a different development flow regardless. Probably going to stick with the separate builds strategy. Thank you very much for you suggestions though.

Collectives™ on Stack Overflow

Source maps using gulp, Browserify, reactify, UglifyJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related