Skip to content

Instantly share code, notes, and snippets.

Embed
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'))
})
@jpilcher

This comment has been minimized.

Copy link

jpilcher commented Oct 26, 2015

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?

@icreatesolutions

This comment has been minimized.

Copy link

icreatesolutions commented Dec 1, 2015

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

.pipe(plumber({errorHandler: map_error})

@Juljan

This comment has been minimized.

Copy link

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 ?

@arch-mage

This comment has been minimized.

Copy link

arch-mage commented Jan 18, 2016

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

@Tushant

This comment has been minimized.

Copy link

Tushant commented Jan 21, 2016

What further process should be done for multiple bundling?

@MaffooBristol

This comment has been minimized.

Copy link

MaffooBristol commented Apr 16, 2016

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-

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.