I have been working on improving the speed of my Gulp workflow by using Browserify. The approach I am taking is heavily influenced by this informative blog post:
Initially, everything seems to be functioning well with changes reflecting quickly (around 500ms).
However, I have noticed that the time it takes for changes to reflect increases each time I save a file. Here is a snippet of my task:
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./src/js/app.js'],
debug: production,
cache: {},
packageCache: {},
fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function() {
var updateStart = Date.now();
function transform(next) {
console.log('JavaScript changed - recompiling via Browserify');
watcher.transform(babelify).bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./build/scripts'))
.on('end', next);
}
transform(function() {
gulp.start('usemin');
console.log('Complete!', (Date.now() - updateStart) + 'ms');
});
})
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./build/scripts'));
During the initial build, it takes approximately 3 seconds (including just one file).
However, on subsequent file changes:
JavaScript changed - recompiling via Browserify
[11:31:24] Starting 'usemin'...
Complete! 608ms
[11:31:24] Finished 'usemin' after 24 ms
JavaScript changed - recompiling via Browserify
[11:31:29] Starting 'usemin'...
Complete! 785ms
[11:31:29] Finished 'usemin' after 26 ms
JavaScript changed - recompiling via Browserify
[11:31:31] Starting 'usemin'...
Complete! 814ms
[11:31:31] Finished 'usemin' after 17 ms
JavaScript changed - recompiling via Browserify
[11:31:33] Starting 'usemin'...
Complete! 1112ms
[11:31:33] Finished 'usemin' after 17 ms
JavaScript changed - recompiling via Browserify
[11:31:36] Starting 'usemin'...
Complete! 1594ms
[11:31:36] Finished 'usemin' after 16 ms
Even though I am only saving the file without actually changing its content, the time taken seems to be stacking up. Is there something I am overlooking that might be causing this issue?
EDIT:
Upon further investigation, I found that removing .transform(babelify)
from the 'update' section seems to resolve this prolonged duration issue. Although, I am unsure of any potential ramifications or why this change is causing such delay.