Gulp crashes after renaming or deleting folders

Question

Gulp crashes after changing folder names or deleting them. Is it a common issue that happens to everyone?

// Task to copy images to dist.
gulp.task('copy-images', function() {
  return gulp.src([
    'images/*.{jpg,png,gif}',
    'images/**/*.{jpg,png,gif}',
    'node_modules/jquery-ui-bundle/images/*',
  ])
  .pipe(gulp.dest('dist/images/'))
})

// Task to watch.
gulp.task('watch', function () {
  // Watch all the fonts files recursively.
  gulp.watch([
    'images/**'
  ], [
    'copy-images'
  ])
})

So when I add a new folder logos1, I get:

[10:58:31] Starting 'watch'...
[10:58:31] Finished 'watch' after 13 ms
[11:02:10] Starting 'copy-images'...
[11:02:10] Finished 'copy-images' after 58 ms

Which is what I expect. But if I delete that logos1 and add new folder logos2, gulp crashed:

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: watch /var/www/html/xxx8/images/logos1 ENOENT
    at _errnoException (util.js:1022:11)
    at FSWatcher.start (fs.js:1382:19)
    at Object.fs.watch (fs.js:1408:11)

It is complaining about logos1 that I deleted.

Any ideas? Any solutions?

Answer 1

I use these two packages to solve the problem:

• gulp-watch
• gulp-batch

Code:

gulp.task('watch', function () {
  watch([
      'images/**',
      'images/**/*.{jpg,png,gif}'
    ], batch(function (events, done) {
      gulp.start('copy-images', done)
  }))
  watch([
      'fonts/**',
      'fonts/**/*.{eot,svg,ttf,woff,woff2}'
    ], batch(function (events, done) {
      gulp.start('copy-fonts', done)
  }))
})

No more crash!