Instantly share code, notes, and snippets.

Embed
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(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();
}
@gnimmelf

This comment has been minimized.

gnimmelf commented Jul 16, 2015

Thnx!

@stefanmaric

This comment has been minimized.

stefanmaric 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.

_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.

@xuechengwei

This comment has been minimized.

xuechengwei commented Nov 6, 2015

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment