Base gulpfile config for babel, browserify, and uglify - with sourcemaps and livereload

gulpfile.js

var gulp        = require('gulp');

var browserify  = require('browserify');
var babelify    = require('babelify');
var source      = require('vinyl-source-stream');
var buffer      = require('vinyl-buffer');
var uglify      = require('gulp-uglify');
var sourcemaps  = require('gulp-sourcemaps');
var livereload  = require('gulp-livereload');


gulp.task('build', function () {
    // app.js is your main JS file with all your module inclusions
    return browserify({entries: './src/js/app.js', debug: true})
        .transform("babelify", { presets: ["es2015"] })
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(livereload());
});

gulp.task('watch', ['build'], function () {
    livereload.listen();
    gulp.watch('./src/js/*.js', ['build']);
});

gulp.task('default', ['watch']);

shell-install.sh

npm install --save-dev babel-preset-es2015 babelify browserify vinyl-source-stream vinyl-buffer gulp-uglify gulp-sourcemaps gulp-livereload

So that you can write ES6 code in the browser! Just run the command in shell-install.sh to install all the dependencies.

Appreciated!

Thanks so much. FYI - I had to remove uglify to get the sourcemaps to work.

Thanks! BTW, I needed to use sourcemaps.init({loadMaps: true}) for source maps to get loaded correctly.

For me it produced sourcemaps that did not map correctly to the source

Thanks! I needed to add the buffer() call to get past a "Streaming not supported" error from gulp-uglify.

Hi guys! What node version must be installed in my machine for support this gulp modules?

@alex1012 Works fine with node v7.7.2

babel-preset-es2015 depricated