Watchify not triggering 'update' event at all

[luca-moser]

Hi, I have a problems with gulp, watchify and browserify.

Versions:

• NodeJS 0.12.1
• gulp 3.8.11
• watchify 3.1.0
• browserify 9.0.6
• Windows 10 64bit

Currently I have setup gulp to transpile ES6 files from a src folder into a target folder with the same directory structure. I've setup watchify to watch after target/client/js/client.js which is the client side browserify entry point.

If a dependency changes or the entry point file itself, the bundler is never executed (watchify doesnt get the update event triggered). If I manually trigger a call to bundle() then only the last state of the saved file is bundled into the final bundle.js file instead of the current one, as if the last version is cached. However, the files in the target folder (which got transpiled by babel) have the right state, it's only the bundle.js file, which has the one version older file compiled in.

Workflow:

1. client.js is the main entry point
2. client.js has a dependency Router.js
3. Router.js has a dependency NotFoundView.js
4. NotFoundView.js has dependency NotFound.js
5. Neither changing one of this files will trigger watchify to emit the 'update' event

The code snippet for watchify is copied from https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md

Relevant gulpfile code:

// source paths
var sourcePaths = {
    client: {
        img: [
            'src/client/imgs/**/*.png',
            'src/client/imgs/**/*.jpg',
            'src/client/imgs/**/*.ico'
        ],
        css: 'src/client/css/**/*.scss',
        js: 'src/client/js/**/*.js'
    },
    config: 'src/config/**/*.json',
    server: {
        js: 'src/server/**/*.js',
        views: 'src/server/**/*.jade'
    }
};

// destination paths
var destPaths = {
    client: {
        img: 'target/client/imgs',
        css: 'target/client/css',
        js: 'target/client/js',
        jsTargets: ['target/client/js/**/*.js', '!target/client/js/client.js'],
        entryPoint: './target/client/js/client.js',
        browserifyTarget: 'target/client/js'
    },
    config: 'target/config',
    server: {
        js: 'target/server',
        views: 'target/server'
    }
};

gulp.task('transpileClientJS', function(){
    gulp.src(sourcePaths.client.js)
    .pipe(plumber())
    .pipe(watch(sourcePaths.client.js))
    .pipe(babel())
    .pipe(gulp.dest(destPaths.client.js))
    .pipe(notify('transpiled client js6 files'));
});

var customOpts = {
    entries: [destPaths.client.entryPoint],
    debug: true
};
var opts = _.assign({}, watchify.args, customOpts);
var bundler = watchify(browserify(opts));
bundler.on('update', bundle);
bundler.on('log', gutil.log);

function bundle(){
    return bundler.bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(plumber())
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(destPaths.client.browserifyTarget))
    .pipe(notify('browserified client js files'))
    .pipe(livereload());
}

[derekr]

I'm experiencing the exact same issue in a react project (assuming it's something to do w/ reactify/babel transforms)

Some other notes:
On the written to notification the timer seems to represent the time since the last update instead of how long it took to actually build the new bundle.

When acting normal the builds take ~0.10s

node_modules/.bin/browserify \
        -r react \
        -r react/addons \
        -r react-router \
        -r alt \
        -g [ reactify --es6 ] \
        -o public/build/js/vendor.bundle.js

node_modules/.bin/watchify client/main.jsx \
        -x react \
        -x react/addons \
        -x react-router \
        -x alt \
        -t [ reactify --es6 ] \
        -t envify \
        -o public/build/js/main.bundle.js \
        -dv

[zertosh]

@derekr @XemsDoom It was a temporary issue in browserify@9.0.6, browserify/browserify#1195 fixed it. So just reinstall watchify so that it pulls in browserify@9.0.7 and you're good to go.

[derekr]

Awesome. Thanks!

[luca-moser]

Thanks a lot, it works now! 👍