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).

Answer 1

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())
})