How to get sourcemaps for gulp+babel+browserify+uglify

Question

I am using gulp to bundle browserify+babelify with uglifyjs. O However, the sourcemaps generated from my project only give me the bundled version, not the bundled version.

Here is my setup:

var gulp       = require('gulp'),
    source     = require('vinyl-source-stream'),
    browserify = require('browserify'),
    gutil      = require('gulp-util'),
    buffer     = require('vinyl-buffer'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify     = require('gulp-uglify'),
    file       = 'index.js';

gulp.task('build', function(){
    return browserify({
        entries: [file],
        transform: ["babelify"]
      })
    .bundle()
    .pipe(source(file))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'))
    .pipe(gutil.noop())
})

Is there a way for me to create a build that bundles babel=>browserify=>uglify and still return me maps to my pre-babel files?

I also don't mind not using gulp (I actually prefer grunt but this setup used to work for me in the past).

The question states only give me the bundled version, not the bundled version. I'm assuming you mean only give me the bundled version and not the unbundled version. If so can you make the edit to update the question. — PatS
My guess is that the gutil.noop() was added in an attempt to make another gulp task wait for the gulp.dest() to complete. But I don't think gulp works that way. — PatS

Nir Nir · Accepted Answer · 2015-12-28T13:59:47

First of all you need to set browserify to generate source maps by setting the debug option to true, then if you want the pre babelify source maps you need to configure babelify to generate source maps:

   var gulp       = require('gulp'),
    source     = require('vinyl-source-stream'),
    browserify = require('browserify'),
    gutil      = require('gulp-util'),
    buffer     = require('vinyl-buffer'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify     = require('gulp-uglify'),
    babelify   = require('babelify')
    file       = 'index.js';

gulp.task('build', function(){
    return browserify(file,{debug:true}).transform(babelify, {presets: ["es2015", "react"],sourceMaps:true})
    .bundle()
    .pipe(source(file))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build/js'))
    .pipe(gutil.noop())
})

How to get sourcemaps for gulp+babel+browserify+uglify

1 Answers