Skip to content

Instantly share code, notes, and snippets.

@tmtxt tmtxt/gulpfile.js
Created Jun 7, 2015

What would you like to do?
var _ = require('lodash');
var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var transform = require('vinyl-transform');
var shimify = require('browserify-shim');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');
var notifier = require('node-notifier');
var util = require('gulp-util');
var gulpif = require('gulp-if');
// browserify config
var browserifyConfig = {
basedir: '.',
paths: './js'
// create browserify transform
var cached = {};
function createBundler(mode) {
var bundler = transform(function(filename){
var b;
if(mode === "dev") {
b = browserify(filename, _.extend(browserifyConfig, {debug: true}));
} else if(mode === 'prod') {
b = browserify(filename, browserifyConfig);
} else if(mode === 'watch') {
if(cached[filename]) return cached[filename].bundle();
b = watchify(browserify(filename, _.extend(browserifyConfig, watchify.args, {debug: true})));
cached[filename] = b;
// event
b.on('error', browserifyError);
if(mode === 'watch') {
b.on('time', function(time){util.log('Browserify'), filename,'in ' + time + ' ms'));});
b.on('update', function(){
bundle(filename, createBundler('watch'), 'watch');
// transform
return b.bundle();
return bundler;
// bundle
function bundle(source, bundler, mode) {
return gulp.src(source)
.pipe(plumber({errorHandler: browserifyError}))
.pipe(gulpif(mode === "prod", uglify({mangle: false})))
// browserify task
gulp.task('js-dev', function(){
return bundle('./js/*.js', createBundler("dev"), "dev");
gulp.task('js-prod', function(){
return bundle('./js/*.js', createBundler("prod"), "prod");
gulp.task('js-watch', function(){
return bundle('./js/*.js', createBundler("watch"), 'watch');
// error handler
function error(err) {
notifier.notify({message: 'Error: ' + err.message});
util.log('Error: ' + err.message));
function browserifyError(err) {

This comment has been minimized.

Copy link

commented Jul 16, 2015



This comment has been minimized.

Copy link

commented Jul 20, 2015

@tmtxt does this work with Browserify 9.x.x and above?

Browserify 11 doesn't meet browserify-shim requirements:

npm ERR! peerinvalid The package browserify@11.0.0 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer browserify-shim@3.8.9 wants browserify@>= 2.3.0 < 11

And with browserify >= 9.0.0 <= 10.2.6 I get errors with vinyl-transform streams as described on substack/node-browserify#1191 and substack/node-browserify#1044.

    var written = dest.write(chunk);
TypeError: Object #<Readable> has no method 'write'
    at write (_stream_readable.js:602:24)
    at flow (_stream_readable.js:611:7)
    at _stream_readable.js:579:7
    at process._tickCallback (node.js:448:13)

I'm searching for an updated working multi-bundle gulpfile example.



This comment has been minimized.

Copy link

commented Nov 6, 2015

Seems not working with Browserify 12.0.1

Starting 'js-watch'...
    var ret = dest.write(chunk);
TypeError: dest.write is not a function
    at Producer.ondata (_stream_readable.js:528:20)
    at emitOne (events.js:77:13)
    at Producer.emit (events.js:169:7)
    at (_stream_readable.js:360:10)
    at flow (_stream_readable.js:743:26)
    at resume_ (_stream_readable.js:723:3)
    at doNTCallback2 (node.js:439:9)
    at process._tickCallback (node.js:353:17)
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.