This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} |
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
@tmtxt does this work with Browserify 9.x.x and above?
Browserify 11 doesn't meet browserify-shim requirements:
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.
I'm searching for an updated working multi-bundle gulpfile example.
Thanks.