gulp.watch running same task multiple times when saving many files

Question

Is there a way to configure gulp.watch to run task just once when multiple watched files change? I have my task setup like this:

var bs = require('browser-sync').create();

module.exports = function (gulp, plugins, config) {
  return function watch() {
    gulp.watch( 

      config.source.javascript, 
      // {debounceDelay: 500}, 
      gulp.series('js', 'wp', bs.reload) 

    );
  };
};

..and when I save multiple watched files at once (Save all in text editor), my gulp.series (I'm using gulp 4.0) tasks are run once for each changed file. Is there a way to change this and make gulp.watch run gulp.series tasks just once?

Thanks..

Answer 1

I've added a 'buffer' function like this:

var reload = false;
var delay = 500;

function brsync_reload(done) { brsync.reload();                 queue_reset(done); }
function brsync_stream(done) { brsync.reload({ stream: true }); queue_reset(done); }

function queue_reload() { gulp.series(gulp.queue.concat(brsync_reload))(); }
function queue_stream() { gulp.series(gulp.queue.concat(brsync_stream))(); }
function queue_reset(done)  { gulp.queue = []; reload = false; done(); }

function queue_tasks(tasks, last) {
  reload = reload || last == brsync_reload;
  gulp.queue = gulp.queue || [];

  if (gulp.queue.length == 0)
    setTimeout(reload ? queue_reload : queue_stream, delay);

  gulp.queue = gulp.queue
    .concat(tasks.filter(task => !gulp.queue.some(queued => queued == task)));
  // console.log(gulp.queue);
}

brsync.init(CONFIG.BRSYNC);

gulp.watch(CONFIG.SRC.JAVASCRIPT,     () => queue_tasks(['javascript'], brsync_reload));
gulp.watch(CONFIG.SRC.STATIC,         () => queue_tasks(['static'], brsync_reload));
gulp.watch(CONFIG.SRC.STYLES,         () => queue_tasks(['styles'], brsync_stream));
gulp.watch(CONFIG.SRC.TYPESCRIPT,     () => queue_tasks(['typescript'], brsync_reload));

Now, when I change one file output is:

[21:40:17] Starting '<anonymous>'...
[21:40:17] Starting '<anonymous>'...
[21:40:18] Starting 'typescript'...
[21:40:21] Finished 'typescript' after 3.16 s
[21:40:21] Starting 'brsync_reload'...
[21:40:21] Finished 'brsync_reload' after 2.73 ms

...when I change 3 files (2x typescripe, 1x stylus), output is:

[21:41:19] Starting '<anonymous>'...
[21:41:19] Starting '<anonymous>'...
[21:41:19] Starting '<anonymous>'...
[21:41:19] Starting '<anonymous>'...
[21:41:19] Starting '<anonymous>'...
[21:41:19] Starting '<anonymous>'...
[21:41:20] Starting 'typescript'...
[21:41:22] Finished 'typescript' after 2.02 s
[21:41:22] Starting 'styles'...
[21:41:23] Finished 'styles' after 1.82 s
[21:41:23] Starting 'brsync_reload'...
[21:41:23] Finished 'brsync_reload' after 1.92 ms

Works nicely, only these logs of anonymous functions are annoying (;