Replacing slow gulp.watch task
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 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
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
to be more common and has a lot more of stars, contributors and forks on Gitub then
Translating your tasks
The API´s of
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:
reportChange is just a method that prints the changed files onto the console.
For the new task, you additionally need to require the installed
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
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 :)