Search code examples
optimizationbrowserifysource-maps

Minify ES6 and generate source-maps with Browserify


I use browserify and 6to5ify to compile ES6 to JS and assemble project. The problem is that I can't find any solution, how to minify compiled javascript, and generate source-maps for minified js.

My build task code is:

'use strict';

var gulp = require('gulp'), 
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
uglify = require('gulp-uglify'),
buildErrorHandler = require('./../utilities/build-error-handler').handleBuildError
;

gulp.task('js:build-scripts', function() {
  var commandLineParameters = process.argv.slice(2);
  var releaseModeRequired = commandLineParameters.indexOf('--release') > -1;

  var bundler = browserify({
    debug: true,
    entries: ['./src/js/entry-point.js']
  })
  ;

  var pipeLine =  bundler 
  .transform('6to5ify')
  .bundle()
  .on('error', buildErrorHandler)
  .pipe(plumber({
    errorHandler: buildErrorHandler
  }))
  .pipe(source('application.js'));

  if(releaseModeRequired){
    pipeLine = pipeLine.pipe(buffer()) 
    .pipe(uglify());
  }

  pipeLine =pipeLine.pipe(gulp.dest('build/js'))
  ;

  return pipeLine;
});

If I don't minify code, sourcemaps are working fine, but if I uglify it, sourcemaps disappear.

I tried several solutions like this or this but none of them works.

EDITED:

"browserify": "^8.1.3",
"gulp": "^3.8.10",

Solution

  • This has been an issue with Browserify + Uglify.js for a long time. It got fixed in this commit, but has not been released yet and was release with v2.4.21.