Category: sourcemap

How to do: Gulp + Browserify + Coffeescript + Sourcemaps + Uglify as of mid-2015

I blew so much time on this, it’s crazy.

I got it down to something simple and clean, finally. And it turns out the “recipes” section on the Gulp website pretty much had the answer already. I just needed to understand more about what I was trying to do in the first place.

Note: You need to install coffeeify to have it available as a transform!

var gulp        = require('gulp');
var browserify  = require('browserify');
var source      = require('vinyl-source-stream'); //to 'rename' your resulting file
var uglify      = require('gulp-uglify');
var buffer      = require('vinyl-buffer'); // to transform the browserify results into a 'stream'

var sourcemaps  = require('gulp-sourcemaps');

gulp.task("your_target",function() {
  browserify({
      entries: ["./sample.coffee"],
      debug: true,
      extensions: [".coffee"],
      transform: ["coffeeify"] // npm install --save-dev coffeeify
      })
    .bundle()
    .pipe(source('resulting_file_name.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true,debug: true}))
    .pipe(uglify(/* {
          debug: true,
          options: {
            sourceMap: true,
          }
      }*/)).pipe(sourcemaps.write("./" /* optional second param here */))
    .pipe(gulp.dest('./build/'));

});

If you don’t want the sourcemap URL in your resulting JS file (which I didn’t, because I keep my sourcemap file private), add a second parameter ,{addComment: false} to the sourcemaps.write line near the end.

Edit: – the parameter to uglify isn’t even needed.