Replacing slow gulp.watch task

December 30, 2016

I am currently working on a big project, meaning that we have a lot of files that needs to be watched. Somewhen our gulp watch task started to be very slow and to need round about 2 minutes to ramp up (initial gulp watch call) and more than 8 seconds for a refresh when edited a single file. It was nearly impossible to continue working with this, so I searched for a solution.

We were using the built-in gulp.watch and the solution for us was to just replace it with the gulp-watch plugin which brought a huge speed improvement. Maybe there are other optimizations that would have solved the problem, but to just change from gulp.watch to gulp-watch was a pretty easy solution and the main work was research.

gulp.watch vs. gulp-watch

The main difference between these two is that gulp.watch uses gaze for implementing the whole watch functionality and gulp-watch uses chokidar. Chokidar is using a combination of Node.js fs.watch, fs.watchFile and the fsevents API, you can read more about it on there website. Gaze whereas uses globbing, fs.watch and "the best out of other libraries". I can´t tell why chokidar exactly worked better for us but chokidar seems to be more common and has a lot more of stars, contributors and forks on Gitub then gaze.

Translating your tasks

The API´s of gulp.watch and gulp-watch are looking somehow different and so it needed a little time to find out, how to exactly refactor the task. We are using browserSync, so the page reloads automatically as soon as a changed was detected, so the task before looked like this:

gulp.watch(paths.source, function () {
    runSequence('build-system', 'lint', () => {
        browserSync.reload();
    });
}).on('change', reportChange);

reportChange is just a method that prints the changed files onto the console.

For the new task, you additionally need to require the installed gulp-watch package.

var watch = require('gulp-watch');

watch(paths.source)
.on('change', (event) => {
    reportChange(event);
    runSequence('build-system', 'lint', () => {
        browserSync.reload();
    });
});

The main changes are that gulp.watch takes a function as the second parameter which will be executed as soon as one of the files changed.gulp-watch only takes a list of file paths as parameter and you have to listen for the change event to handle the change.

The Problem might be solved already

It seems like the gulp team has already switched from gaze to chokidar on the 4.0 branch so this problem might be solved soon. Maybe this will help someone in the meantime or in older not yet updated projects.

Found some typo, want to give feedback or discuss? Feel free to contact me :)