Skip to content

Instantly share code, notes, and snippets.

@rootical
Last active September 23, 2017 16:40
Show Gist options
  • Save rootical/d700ea0d89bbfc362fc5 to your computer and use it in GitHub Desktop.
Save rootical/d700ea0d89bbfc362fc5 to your computer and use it in GitHub Desktop.
Gulp task example of using Browserify, Watchify, Babelify, Browser Sync, ngAnnoatate with ES6 source maps.
var gulp = require('gulp');
var gulpif = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
var util = require('util');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var watchify = require('watchify');
var browserify = require('browserify');
var browserSync = require('browser-sync');
var babelify = require('babelify');
var ngAnnotate = require('browserify-ngannotate');
var _ = require('lodash');
gulp.task('browserify', function() {
bundle(false);
});
gulp.task('browserify-watch', ['lint:js'], function() {
bundle(true);
});
function bundle(watch) {
var bro;
if (watch) {
bro = watchify(browserify('./client/app/app.js',
// Assigning debug to have sourcemaps
_.assign(watchify.args, {
debug: true
})));
bro.on('update', function() {
rebundle(bro);
});
} else {
bro = browserify('./client/app/app.js', {
debug: true
});
}
bro.transform(babelify.configure({
compact: false
}));
bro.transform(ngAnnotate);
function rebundle(bundler) {
return bundler.bundle()
.on('error', function(e) {
util.log('Browserify Error', e);
})
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
})) // loads map from browserify file
.pipe(sourcemaps.write()) // writes .map file
.pipe(gulp.dest('.tmp/app'))
.pipe(gulpif(watch,
browserSync.reload({
stream: true,
once: true
})));
}
return rebundle(bro);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment