gulpbrowserifywatchify

Gulp doesn't exit with watchify, browserify


I would like to set up gulp to be able to do two things: 1) use watchify to monitor updates in files and automatically rebuild using browserify on changes, and 2) do an ad-hoc build once and exit.

#1 seems to be working fine, but I'm having trouble getting #2 to work. I type gulp build in the terminal and everything is bundled up just fine, but gulp doesn't exit or quit; it just sits there and I'm not brought back to the command line.

What am I doing wrong? Here's the entire gulpfile:

'use strict';

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');

var b = watchify(browserify({
  cache: {},
  packageCache: {},
  entries: ['./app/app.js'],
  debug: true,
  transform: ['reactify']
}));

b.on('log', gutil.log);

var bundle = function() {
  return b.bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
};

gulp.task('watch', function() {
  b.on('update', bundle);
});

gulp.task('build', function() {
  bundle();
});

gulp.task('default', ['watch', 'build']);

And here's the output in my terminal:

[11:14:42] Using gulpfile ~/Web Dev/event-calendar/gulpfile.js
[11:14:42] Starting 'build'...
[11:14:42] Finished 'build' after 4.28 ms
[11:14:45] 1657755 bytes written (2.99 seconds)

Gulp is still running after the log at 11:14:45 and doesn't jump back out to the terminal.


Solution

  • .bundle() shouldn't be called on the watchify wrapper. The following fixed everything:

    'use strict';
    
    var gulp = require('gulp');
    var browserify = require('browserify');
    var watchify = require('watchify');
    var source = require('vinyl-source-stream');
    var gutil = require('gulp-util');
    
    var b = function() {
      return browserify({
        cache: {},
        packageCache: {},
        entries: ['./app/app.js'],
        debug: true,
        transform: ['reactify']
      });
    };
    
    var w = watchify(b());
    
    w.on('log', gutil.log);
    
    var bundle = function(pkg) {
      return pkg.bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dist'));
    };
    
    gulp.task('watch', function() {
      bundle(w);
      w.on('update', bundle.bind(null, w));
    });
    
    gulp.task('build', bundle.bind(null, b()));
    
    gulp.task('default', ['watch']);