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.
.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']);