gulp-watchify-factor-bundle

A sugar wrapper for browserify, watchify and factor-bundle to work with gulp.

The main ideas are borrowed from reduce-js.

Usage

gulpfile.js:

var reduce = require('gulp-watchify-factor-bundle')
var gulp = require('gulp')
var path = require('path')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var del = require('del')

gulp.task('clean', function () {
  return del('build')
})

gulp.task('build', ['clean'], function () {
  var basedir = path.join(__dirname, 'src')

  // Create a browserify instance
  // same with `browserify(opts)`
  var b = reduce.create({ basedir: basedir })

  // find entries
  // same with gulp.src()
  return reduce.src('page/**/index.js', { cwd: basedir })
    // apply `factor-bundle`
    // and call b.bundle() which produces a vinyl stream now
    .pipe(reduce.bundle(b, { common: 'common.js' }))

    // apply gulp plugins to process the vinyl stream
    .pipe(buffer())
    .pipe(uglify())

    // same with gulp.dest
    .pipe(reduce.dest('build'))
})

gulp.task('watch', ['clean'], function () {
  var basedir = path.join(__dirname, 'src')

  // Create a browserify instance
  // same with `browserify(opts)`
  var b = reduce.create({ basedir: basedir })

  b.on('log', console.log.bind(console))

  // find entries
  // same with gulp.src()
  return reduce.src('page/**/index.js', { cwd: basedir })
    // apply `factor-bundle` and `watchify`
    .pipe(reduce.watch(b, { common: 'common.js' }))
    // whenever `b.bundle()` is called,
    // event 'bundle' is fired
    .on('bundle', function (vinylStream) {
      // vinylStream = b.bundle()
      vinylStream
        // apply gulp plugins to process the vinyl stream
        .pipe(buffer())
        .pipe(uglify())
        // same with gulp.dest
        .pipe(reduce.dest('build'))
    })
})

The source directory:

example/src/
├── node_modules
│   └── color-map
│       └── index.js
└── page
    ├── blue
    │   └── index.js
    └── red
        └── index.js

The build directory:

⌘ tree example/build/
example/build/
├── common.js
└── page
    ├── blue
    │   └── index.js
    └── red
        └── index.js

Exports

create()

Same with the browserify constructor.

bundle(b, bundleOptions)

A gulp plugin to use browserify with factor-bundle, and produces a vinyl stream.

b

The browserify instance.

bundleOptions

Options for factor-bundle.

bundleOptions.common specifies the path to the common bundle. All other options are exactly the same with those consumed by factor-bundle.

NOTE

bundleOptions.outputs must be an array of file paths. However, if not specified, a new bundle is created for each entry, with the same path with the entry.

watch(b, bundleOptions, watchifyOptions)

A gulp plugin to use browserify with factor-bundle and watchify.

b

The browserify instance.

bundleOptions

Options for factor-bundle.

watchOptions

Options for watchify.

NOTE This method creates a transform to process the entry stream, and emit a bundle event whenever b.bundle() called.

reduce.watch().on('bundle', vinylStream => {})