Gulp with watchify/browserify runs twice then stops watching

Question

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?

are you actually changing the contents of a file between the 2nd and 3rd saves? — thataustin, Dec 03 '14 at 20:52
well, I don't think this an answer you want to hear, but I will say that I use [gulp-browserify](https://www.npmjs.org/package/gulp-browserify), and I think my setup involves slightly less complexity that what you have there. Here's an example project where I use it to transform jsx (ie,react) files into js before browserifying: https://github.com/thataustin/react-maps/blob/master/gulpfile.js — thataustin, Dec 03 '14 at 23:12
@thataustin, that module has been blacklisted. https://github.com/deepak1556/gulp-browserify/issues/64 — thealexbaron, Dec 04 '14 at 03:56
I don't see why they blacklisted it. It's sort of like how I just blacklisted apple pie, because it doesn't conform to my ideals. I'm still using gulp; I'm still eating apple pie. No need to limit my tool belt without reason. — thataustin, Dec 04 '14 at 05:46
Is there a reason that you're using both `watchify` and `gulp.watch`? — Ben, Dec 04 '14 at 17:54
My understanding of `watchify` is that it handles incremental browserify builds for you. So, you shouldn't need to use `gulp.watch` if you're using `watchify`. I suspect the two are conflicting somehow. — Ben, Dec 05 '14 at 17:08
This sounds like my issue... https://github.com/gulpjs/gulp/issues/407 — thealexbaron, Dec 05 '14 at 18:38

score 10 · Answer 1 · answered Apr 02 '15 at 12:12

10

Just came across this issue. After browsing the web for answers for a couple hours I tried editing the file in Notepad instead of PHPStorm IDE. It turned out that browserify/watchify continued to work via notepad.

Thats when I tried to play around with some settings. It turned out PHPStorm / System Settings / Use "safe write", if enabled, stops watchify after PHPStorm edits the file.

All the problems magically disappeared when i turned "safe write" off. I am not sure what IDE you are using, but maybe there is a "Safe Write" option too.

answered Apr 02 '15 at 12:12

Jeremy

367
4
12

1

thanks a lot for sharing! i was getting mad at this :D – Alexandre Martini Aug 13 '16 at 23:44
1

I can't upvote this enough, I went trough a lot of different browserify setups, read, and re-re-read all of the options that i was passing and it was driving me crazy. – CoolGoose Dec 21 '16 at 08:54

score 5 · Answer 2 · answered Feb 27 '15 at 21:49

It wasn't obvious for me either when I first used watchify to speed-up browserify js compile time. When using watchify gulp.watch no longer required. To see the compile/build time in the output/tasks window you can do the following (note the gutil.log command):



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

    var bundler = watchify(browserify('./src/app.js', watchify.args));
    gulp.task('browserify', bundle);

    bundler.on('update', bundle); 

    function bundle() {
        var start = new Date().getTime();

        var b = bundler.bundle()
          .on('error', gutil.log.bind(gutil, 'Browserify Error'))
          .pipe(source('bundle.js'))
          .pipe(buffer())
          .pipe(gulp.dest('./src/dist'));

        var end = new Date().getTime();
        var time = end - start;

        gutil.log('[browserify]', 'rebundle took ', gutil.colors.cyan(time + ' ms'));
        return b;
    }

See if that helps.

could look at gulp-duration as a shorthand – backdesk Jan 08 '16 at 12:19 — backdesk, Jan 08 '16 at 12:19

thealexbaron · Accepted Answer · 2016-08-22T19:05:19.620

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

score 2 · Answer 4 · answered Dec 05 '14 at 17:09

2

I think watchify and gulp.watch are probably conflicting when they both try to rebuild your bundle. I would remove the watch task, and just use the browserify task directly.

answered Dec 05 '14 at 17:09

Ben

10,056
5
41
42

score 0 · Answer 5 · answered Nov 10 '15 at 17:18

If you're using vim and run in to this issue, and are not using both watchify and gulp.watch, try doing :set noswapfile, or adding set noswapfile in your .vimrc.

I believe this fix works because vim's scheme of creating and editing a .swp file while you work and then replacing the file with the swap file when you actually save interferes with watchify's ability to receive file system events.

Note that :set noswapfile means your edits are not saved to disk until you actually do :w!

Gulp with watchify/browserify runs twice then stops watching

5 Answers5