How to restart gulp watch when git branch changes

Question

It's useful to have gulp building files using a watch task. In my case I have a task which watches a php directory for changes and lints/copies on change, a JS directory which concatenates and copies, and SASS which compiles to CSS on change.

If I checkout another git branch with the watch task running it quite expectedly goes insane, as literally hundreds of files change. One problem which could be solvable is that the watch triggers generic tasks - the PHP one for example simply re-lints and copies all PHP files, not just the one that changed. So if 50 files change, the whole stack is re-linted 50 times. Ditto for JS (because of dependencies) and SASS (because it runs compass, which then also sees every file as changed).

So at present my solution is to kill my watch task (which is running using Sublime Gulp), then checkout a new branch, then re-run it. I'd imagine that any solution would either need to modify the Sublime Gulp plugin, or stop me using it - which would be fine if there was a quick shortcut to have the watch task run in the background of my terminal, and allow me to see output but not have it forced on me.

I know that git has hooks, and so I'm imagining another solution may be to have a checkout hook produce a file which could act as a temporary stop sign to the watch task, or something similar.

Anyone experienced a similar issue using watch and how would you suggest solving it?

Answer 1

As specified in @Mushr00m's answer for Gulp.js, watch task runs twice when saving files, there is a debounceDelay option you can pass to gulp.watch().

debounceDelay {integer} Delay for events called in succession for the same file/event

In short, as a long as all of your changes happen at the same time, the debounceDelay will wait before triggering you watched tasks. In my experiences, git is normally pretty quick, so you could set a debounceDelay of perhaps 500 or 1000 without much impact to your development workflow.

Example:

gulp.watch('/**/*.less', {debounceDelay: 2000}, ['less']);

I was able to verify this be digging through the documentation. The actual functionality comes from gaze.