Delay in gulp watch

Question

Currently I'm working true ftp and running gulp watch on te server, now te problem is that when my gulp watch is detecting changes the file is not ready with uploading, so I need to have a delay in my gulp watch.

gulp.task('watch', function() {
  setTimeout(function() {
    gulp.watch(config.js.app.pathIn + '/**/*.js', ['js_app']);
    gulp.watch(config.js.vendor.pathIn + '/**/*.js', ['js_vendor']);
    gulp.watch(config.scss.pathIn + '/**/*.scss', ['scss']);
  }, 3000);
});

This is not delaying the rendering of the files, how can I make sure to have a delay when rending the files?

Answer 1

Gulp-wait looks like it could work for you. Insert it into the top of your three tasks.

gulp.task('watch', function() {
   gulp.watch(config.js.app.pathIn + '/**/*.js', setTimeout(function() {
     gulp.start('scss')
  }, 3000)
});

Above might work if you want a setTimeout method but it uses gulp.start - to be removed from gulp4.0. Much easier if you used gulp4 and just made a function call here to your task instead of to gulp.start.

But I suggest gulp-wait.

Answer 2

In Gulp 4, gulp.watch accepts an options object which, among other things, can define a delay:

gulp.watch( someGlob, { delay: 500 }, someTask );

---

The fine print:

The delay only works for a task function which is passed as an argument to gulp.watch. It does have any effect on event handlers which are set on the return value of gulp.watch. In other words, a delay set in the options for

gulp.watch( globs, options, taskFunction );

works, but

let watcher = gulp.watch( globs, options ); 
watcher.on( "change", callback );

ignores options.delay.

That's because gulp.watch returns an instance of chokidar, which doesn't know about options which are specific to gulp.watch (such as delay or queue).

If you need a delay for event-specific watch tasks, set it up with the events option instead:

gulp.watch( globs, { events: ["add", "change"], delay: 500 }, taskFunction );

The event option is currently missing in the Gulp 4 docs but you'll find it in the documentation of glob-watcher, the component providing the watch functionality.