Here is my gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var reactify = require("reactify");
var watchify = require('watchify');
var gutil = require('gulp-util');
var paths = {
scripts: ['src/jsx/index.jsx']
};
gulp.task('browserify', function(){
var bundler = watchify(browserify('./src/jsx/index.jsx', watchify.args));
bundler.transform(reactify);
bundler.on('update', rebundle);
function rebundle() {
return bundler.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/js'));
}
return rebundle();
});
gulp.task('watch', function() {
gulp.watch(paths.scripts, ['browserify']);
});
Then my commandline output looks like this:
$ gulp watch
[15:10:41] Using gulpfile ~/blizztrack/dashboard/gulpfile.js
[15:10:41] Starting 'watch'...
[15:10:41] Finished 'watch' after 9.95 ms
save index.jsx
[15:10:45] Starting 'browserify'...
[15:10:51] Finished 'browserify' after 5.33 s
save index.jsx the second time
[15:11:08] Starting 'browserify'...
[15:11:10] Finished 'browserify' after 2.02 s
save index.jsx the third time
No output.
This seems to be doing exactly what I want it to the first two times, and then it just stops watching. Can anyone point me in the right direction?
Here's what my new working gulp file looks like. Hasn't given me any problems and accomplishes the same thing. Pretty sure @Ben was correct - gulp.watch and watchify were conflicting.
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var chalk = require('chalk');
var gcallback = require('gulp-callback');
var moment = require('moment');
var gutil = require('gutil');
var jsDest = '../../server/webship/html/html/static/js';
var viewsDir = './js/views';
var watchifyArgs = watchify.args;
watchifyArgs.debug = true;
var bundler = watchify(browserify('./js/views/main.jsx', watchifyArgs));
// add any other browserify options or transforms here
bundler.transform(reactify);
bundler.on('time', function (time) {
var durationOfBundleBuild = moment.duration(time).asSeconds();
console.log(chalk.green('Updated'), ' bundle in ', chalk.bold(durationOfBundleBuild + 's'), '\n');
});
gulp.task('watch', function() {
bundle(true);
bundler.on('update', function() {
console.log('updating...');
bundle(true);
});
});
gulp.task('build', function() {
bundle();
bundler.close();
});
function bundle(watching) {
console.log(chalk.yellow('Updating') + ' bundle...');
bundler.bundle()
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
.pipe(gulp.dest(jsDest))
.pipe(gcallback(function() {
if (!watching) {
process.nextTick(function() {
process.exit(0);
});
}
}));
}