Replacing slow gulp.watch task

December 30, 2016 | 2 Minute Read

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.

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:

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.