Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
gulp & browserify (+watchify +babelify)
var gulp = require('gulp')
var browserify = require('browserify')
var watchify = require('watchify')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var merge = require('utils-merge')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var sourcemaps = require('gulp-sourcemaps')
/* nicer browserify errors */
var gutil = require('gulp-util')
var chalk = require('chalk')
function map_error(err) {
if (err.fileName) {
// regular error
gutil.log(chalk.red(err.name)
+ ': '
+ chalk.yellow(err.fileName.replace(__dirname + '/src/js/', ''))
+ ': '
+ 'Line '
+ chalk.magenta(err.lineNumber)
+ ' & '
+ 'Column '
+ chalk.magenta(err.columnNumber || err.column)
+ ': '
+ chalk.blue(err.description))
} else {
// browserify error..
gutil.log(chalk.red(err.name)
+ ': '
+ chalk.yellow(err.message))
}
this.end()
}
/* */
gulp.task('watchify', function () {
var args = merge(watchify.args, { debug: true })
var bundler = watchify(browserify('./src/js/app.js', args)).transform(babelify, { /* opts */ })
bundle_js(bundler)
bundler.on('update', function () {
bundle_js(bundler)
})
})
function bundle_js(bundler) {
return bundler.bundle()
.on('error', map_error)
.pipe(source('app.js'))
.pipe(buffer())
.pipe(gulp.dest('app/dist'))
.pipe(rename('app.min.js'))
.pipe(sourcemaps.init({ loadMaps: true }))
// capture sourcemaps from transforms
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('app/dist'))
}
// Without watchify
gulp.task('browserify', function () {
var bundler = browserify('./src/js/app.js', { debug: true }).transform(babelify, {/* options */ })
return bundle_js(bundler)
})
// Without sourcemaps
gulp.task('browserify-production', function () {
var bundler = browserify('./src/js/app.js').transform(babelify, {/* options */ })
return bundler.bundle()
.on('error', map_error)
.pipe(source('app.js'))
.pipe(buffer())
.pipe(rename('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/dist'))
})

Very nice. I'm trying to use gulp-plumber .pipe(plumber(map_error)) to handle my errors instead of .on('error', map_error) but it never seems to fire the map_error function. Any ideas?

@jpilcher I think you need to do this for plumber, but I haven't tried it.

.pipe(plumber({errorHandler: map_error})

Juljan commented Jan 2, 2016

Hello, thanks for this example.

Got a TypeError : this.end is not a function on line 41.
Where should that function be defined ?

Any idea ?

@Juljan try to change it to this.emit('end');

Tushant commented Jan 21, 2016

What further process should be done for multiple bundling?

Thanks! With a few modifications, this worked perfectly for me.

Got React and ES6 bindings to work too by using:

watchify(browserify('./lib/main.jsx', args)).transform(babelify, {presets: ['es2015', 'react']})
swos- commented Sep 18, 2016

Thanks for this. Spent a fair bit of time trying to fix Gulp crashing every time Browserify/Babelify ran into an error. This is the only solution which worked (with a modification of this.end() to this.emit('end')).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment