Source maps using gulp, Browserify, reactify, UglifyJS

Question

I am trying to get the source maps for my JavaScript files working with Chrome. The problem with the current gulp script is that the source maps (which are created by Browserify) lead to smaller versions of the files.

For example, let's say that app.jsx is a record file for Browserify and has require('a') and require('b') calls in it. app.jsx receives the browser, checks and guesses, and writes to app.js, as expected. However, all references to the source maps in module a and module b also minimized:

 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 on how to do this?

Answer 1

This seems to be a problem with uglifyify ( https://github.com/hughsk/uglifyify/issues/16 ). It seems he just doesn't know how to create the source maps.

There are several alternatives:

• Uglify after binding with the gulp-uglify plugin and gulp-sourcemaps . Unfortunately, this is slightly less optimal, as it will not remove dead require expressions.

• Create separate assemblies for development and distribution . You can then generate the source maps for your development without evasion. Your distribution assembly may be cleared without source maps.