CODEWITHSUNDEEP
gulpgulp-watchgulp-4
Ragini
Ragini

Reputation: 13

How to migrate gulp.watch from gulp 3.x to gulp 4.x

I am currently working on migrating gulp from 3.x to 4.x I am struck while converting gulp. Below is the gulp.watch code 

function isOnlyChange(event) {
    return event.type === 'changed';
  }

  function watch(){
    gulp.watch([path.join(conf.paths.src, '/*.html')], ['inject-reload']);

     gulp.watch([
      path.join(conf.paths.src, '/app/**/*.css'),
      path.join(conf.paths.src, '/app/**/*.scss')
    ], function (event) {
      if (isOnlyChange(event)) {
        gulp.start('styles-reload');
      } else {
        gulp.start('inject-reload');
      }
    });

    gulp.watch([path.join(conf.paths.src, '/app/**/*.js'), path.join(conf.paths.src, '/app/**/*.json')], function (event) {
      if (isOnlyChange(event)) {
        gulp.start('scripts-reload');
      } else {
        gulp.start('inject-reload');
      }
    });

    gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function (event) {
      browserSync.reload(event.path);
    });
  };

  gulp.task('watch', gulp.series(watch));
})();

I am getting the following error Error: watching src*.html: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

Do I need to add series and parallel for each gulp.watch? How to migrate this, is there any sample code available for reference.

Upvotes: 0

Views: 116

Answers (1)

TheDancingCode
TheDancingCode

Reputation: 942

The error states that the watch task has to be a function, while yours is an array. Change it to:

gulp.watch([path.join(conf.paths.src, '/*.html')], gulp.series('inject-reload'));

For more info, have a look at this question.

Upvotes: 1

Related Questions