Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Base gulpfile config for babel, browserify, and uglify - with sourcemaps and livereload
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']);
npm install --save-dev babel-preset-es2015 babelify browserify vinyl-source-stream vinyl-buffer gulp-uglify gulp-sourcemaps gulp-livereload
@alkrauss48

This comment has been minimized.

Copy link
Owner Author

@alkrauss48 alkrauss48 commented Nov 4, 2015

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

@lawrencejones

This comment has been minimized.

Copy link

@lawrencejones lawrencejones commented Feb 15, 2016

Appreciated!

@colepacak

This comment has been minimized.

Copy link

@colepacak colepacak commented Jun 9, 2016

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

@menonsamir

This comment has been minimized.

Copy link

@menonsamir menonsamir commented Jul 10, 2016

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

@stsvilik

This comment has been minimized.

Copy link

@stsvilik stsvilik commented Aug 1, 2016

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

@avitevet

This comment has been minimized.

Copy link

@avitevet avitevet commented Oct 19, 2016

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

@alex1012

This comment has been minimized.

Copy link

@alex1012 alex1012 commented Dec 23, 2016

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

@Jayadev6191

This comment has been minimized.

Copy link

@Jayadev6191 Jayadev6191 commented Mar 23, 2017

@alex1012 Works fine with node v7.7.2

@Zulcom

This comment has been minimized.

Copy link

@Zulcom Zulcom commented May 19, 2018

babel-preset-es2015 depricated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.