Augment browserify with the following features:
- Accept patterns to add entries.
- Use
watchify2to watch files, which is able to detect new entries. - Use
common-bundleto pack modules by default, which makeb.bundle()output a stream manipulatable bygulpplugins.
Suppose we want to create one bundle for each js file in /path/to/src,
and an additional common bundle to hold modules shared among them.
const reduce = require('reduce-js')
const path = require('path')
const del = require('del')
const uglify = require('gulp-uglify')
bundle(createBundler())
function createBundler(watch) {
var b = reduce.create(
/* glob for entries */
'*.js',
/* options for browserify */
{
basedir: path.join(__dirname, 'src'),
cache: {},
packageCache: {},
},
/* options for common-bundle */
// single bundle
// 'bundle.js',
// multiple bundles
{
groups: '*.js',
common: 'common.js',
},
/* options for watchify2 */
watch && { entryGlob: '*.js' }
)
return b
}
function bundle(b) {
var build = path.join(__dirname, 'build')
del.sync(build)
return b.bundle().pipe(uglify()).pipe(b.dest(build))
}
To watch file changes:
var b = createBundler(true)
b.on('update', function update() {
bundle(b)
return update
}())To work with gulp:
var gulp = require('gulp')
gulp.task('build', function () {
return bundle(createBundler())
})
gulp.task('watch', function (cb) {
var b = createBundler(true)
b.on('update', function update() {
bundle(b)
return update
}())
b.on('close', cb)
})var reduce = require('reduce-js')
var b = reduce.create(entries, browserifyOptions, bundleOptions, watchifyOptions)Return a browserify instance.
entries: patterns to locate input files. Check [globby] for more details.browserifyOptions: options forbrowserify.bundleOptions: options forcommon-bundle.watchifyOptions: options forwatchify2. If truthy, file changes are watched.
Return a [vinyl] stream,
which can be processed by gulp plugins.
b.bundle().pipe(require('gulp-uglify')()).pipe(b.dest('build'))The same with gulp.dest.