Gulp: Add option for `gulp.watch` to ignore task errors

[th0r]

I've opened this as a duplicate of this closed issue because conversation is locked there and it still not solved in Gulp 4 as it was promised (proof).

What were you expecting to happen?
I expect gulp.watch to continue watching files and executing it's task even after it throws an error.

What actually happened?
If task passed to gulp.watch throws an error, watching stops and gulp process exits.
This is undesired behavior.

Please post a sample of your gulpfile (preferably reduced to just the bit that's not working)

const SCRIPTS = './src/**/*.js';

gulp.task(compileScripts);
gulp.task(watch);
gulp.task('default', watch);

function compileScripts() {
  return gulp
    .src(SCRIPTS)
    .pipe(babel())
    .pipe(gulp.dest('dist'));
}

function watch() {
  gulp.watch(SCRIPTS, {ignoreInitial: false}, compileScripts);
}

When I run gulp watch it compiles scripts and wait's for changes.
The problem is if I make a syntax error in some watched source file gulp process will be terminated but I want it to continue watching for changes and just log this error to the console.

Of course I could add plumber() to compileScripts task but in this case gulp compileScripts would swallow compilation error and exit with zero code.

So, what I'm trying to achieve is:

1. Execution of gulp compileScripts from console should fail with compilation error (exit with non-zero code)
2. Execution of gulp watch should not fail on compilation errors, but should just log them.

Is there a way to achieve it with Gulp 4?

What version of gulp are you using?
4.0

What versions of npm and node are you using?
node v8.9.3
npm v5.6.0

[phated]

@th0r we're likely not going to be adding an option but there might be a better pattern to use. Can you try using pump instead of piping in your tasks and post the results? Ref https://github.com/gulpjs/gulp/blob/master/docs/why-use-pump/README.md

[th0r]

If you mean something like this:

const SCRIPTS = './src/**/*.js';

gulp.task(compileScripts());
gulp.task(watch);
gulp.task('default', watch);

function compileScripts(throwOnError = true) {
  return function compileScripts(cb) {
    pump(
      gulp.src(SCRIPTS),
      babel(),
      gulp.dest('dist'),
      err => {
        if (throwOnError) {
          cb(err);
        } else {
          console.error(err);
        }
      }
    );
  };
}

function watch() {
  gulp.watch(SCRIPTS, { ignoreInitial: false }, compileScripts(false));
}

...then after the first error it's successfully printed to the console and process doesn't exit but watcher doesn't react on file changes anymore.

Here is the solution that works as expected:

const gulp = require('gulp');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
const through = require('through2');

const SCRIPTS = './src/**/*.js';

gulp.task(compileScripts());
gulp.task(watch);
gulp.task('default', watch);

function compileScripts(onlyLogError = false) {
  return function compileNodeScripts() {
    return gulp
      .src(SCRIPTS)
      .pipe(onlyLogError ? plumber() : through.obj())
      .pipe(babel())
      .pipe(gulp.dest('dist'));
  };
}

function watch() {
  gulp.watch(SCRIPTS, { ignoreInitial: false }, compileScripts(true));
}

...but why do we need all these plumbers and through2s for such a simple and obvious task that should be supported out of the box and IMHO should be a default behavior?

Why you don't what to just add some option to gulp.watch?

[phated]

@th0r why did you manipulate your gulpfile so crazily when I asked you to use pump?

What happens with:

const SCRIPTS = './src/**/*.js';

gulp.task(compileScripts);
gulp.task(watch);
gulp.task('default', watch);

function compileScripts(cb) {
  pump([
    gulp.src(SCRIPTS),
    babel(),
    gulp.dest('dist')
  ], cb);
}

function watch() {
  gulp.watch(SCRIPTS, {ignoreInitial: false}, compileScripts);
}

I spent a lot of time on the watcher and I believe that should just work like you are asking.

[th0r]

@th0r why did you manipulate your gulpfile so crazily when I asked you to use pump?

Because your code doesn't work as it should - gulp watch fails on syntax error in sources and gulp process exits.

Ok, to support my bare words I've created a reproduction repo: https://github.com/th0r/gulp-watch-issue

Setup: clone repo and run npm i
Reproduction case: run npm run watch and make some syntax error in index.js
What happens: gulp process exits
What should happen: gulp process should not exit - it should just log syntax error. Also it should run compileScripts task again after you fix this syntax error and continue watching index.js.

[phated]

@th0r thanks! I've created https://github.com/gulpjs/glob-watcher/pull/34 with some more context and some discussion points. Feel free to add your thoughts over there.

[phated]

@th0r thanks for reporting this. We decided to flag this as a bug and I implemented a fix in glob-watcher v5.0.1 - make sure you are getting the latest changes (especially if you have a package-lock or yarn-lock file).