gulpfile.js

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(util.colors.green('Browserify'), filename, util.colors.blue('in ' + time + ' ms'));});
      b.on('update', function(){
        bundle(filename, createBundler('watch'), 'watch');
      });
    }

    // transform
    b.transform(shimify);

    return b.bundle();
  });

  return bundler;
}

// bundle
function bundle(source, bundler, mode) {
  return gulp.src(source)
    .pipe(plumber({errorHandler: browserifyError}))
    .pipe(bundler)
    .pipe(gulpif(mode === "prod", uglify({mangle: false})))
    .pipe(gulp.dest('./resources/public/js'));
}

// 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(util.colors.red('Error: ' + err.message));
}

function browserifyError(err) {
  error(err);
  this.end();
}

Thnx!

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

Browserify 11 doesn't meet browserify-shim requirements:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] 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.

_stream_readable.js:602
    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.

Thanks.

Seems not working with Browserify 12.0.1

Starting 'js-watch'...
_stream_readable.js:528
    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 Producer.Readable.read (_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)