gulpbrowserifygulp-watchwatchify

Gulp with watchify/browserify runs twice then stops watching


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?


Solution

  • 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);
                    });
                }
            }));
    }