10

Everytime watchify detects a change, the bundle time gets slower. There must be something wrong in my gulp task. Anyone any ideas?

gulp.task('bundle', function() {
    var bundle = browserify({
            debug: true,
            extensions: ['.js', '.jsx'],
            entries: path.resolve(paths.root, files.entry)
        });

    executeBundle(bundle);
});

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);

});

function executeBundle(bundle) {
    var start = Date.now();
    bundle
        .transform(babelify.configure({
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source(files.bundle))
        .pipe(gulp.dest(paths.root))
        .pipe($.notify(function() {
            console.log('bundle finished in ' + (Date.now() - start) + 'ms');
        }))
}
Emily
  • 17,813
  • 3
  • 43
  • 47
  • 1
    I think I already fixed it, adding these two options to the bundle seem to fix it: cache: {}, packageCache: {} –  Apr 15 '15 at 17:36
  • Those options are required to use watchify. – JMM Apr 15 '15 at 20:37
  • I have those options configured, but am still seeing a similar issue. With each run, the time to rebuild increases, even if the file is just touched (no actual changes) until eventually it crashes with a `RangeError: Maximum call stack size exceeded` – Emily Apr 17 '15 at 22:50
  • @Emily post your question as a question. – JMM Apr 20 '15 at 13:25

1 Answers1

39

I had this same problem and investigated it by setting environment variable DEBUG to babel. e.g.:

$ DEBUG=babel gulp

After inspecting the debug output I noticed that the babelify ran transformations multiple times.

The culprit was that I actually added the transformation every time the bundle was executed. You seem to have the same problem.

Move the

.transform(babelify.configure({
    ignore: /(bower_components)|(node_modules)/
}))

from inside executeBundle into the tasks. The new bundle-watch could be written like this:

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.transform(babelify.configure({
        ignore: /(bower_components)|(node_modules)/
    }))
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);
});
keso
  • 702
  • 5
  • 16
  • 4
    Wish I could upvote this more. It would have taken me a long time to figure that out. – joemaller May 09 '15 at 20:47
  • Well spotted! Moving the transform out of the method that's called each watchify update fixed a similar issue I had with the build process taking progressively longer and longer over time. – Robin Hawkes Sep 28 '15 at 14:56