7

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?

Konstantin Grushetsky
  • 1,012
  • 1
  • 15
  • 32
Adrian Adkison
  • 3,537
  • 5
  • 33
  • 36

1 Answers1

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:

  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.

Justin Howard
  • 5,504
  • 1
  • 21
  • 48
  • 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. – Adrian Adkison Dec 10 '14 at 18:32
  • 1
    You need to tell gulp sourcemaps to read the existing maps. `sourcemaps.init({loadMaps: true})` – Justin Howard Dec 10 '14 at 18:39
  • 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. – Adrian Adkison Dec 10 '14 at 23:02