Search code examples
gulpgulp-watch

Problem with gulp watch after upgrading to gulp 4

Linked to this issue = Gulp error: The following tasks did not complete: Did you forget to signal async completion?

When I try to run "watch" with the following code it errors:

gulp.task('watch', async function() {
    var watchJs = gulp.watch(paths.js, ['scripts']),
        watchJson = gulp.watch(paths.json, ['json']),
        watchHtml = gulp.watch(paths.html, ['html']),
        watchCss = gulp.watch(paths.css, ['css']),
        watchFonts = gulp.watch(paths.fonts, ['fonts']),
        watchAssets = gulp.watch(paths.assets, ['assets']),

        onChanged = function(event) {
            console.log('File ' + event.path + ' was ' + event.type + '. Running tasks...');
        }

    watchJs.on('change', onChanged);
    watchJson.on('change', onChanged);
    watchHtml.on('change', onChanged);
    watchCss.on('change', onChanged);
    watchFonts.on('change', onChanged);
    watchAssets.on('change', onChanged);
});

Error says: Error: watching src/js/**/*.js: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

But I have no idea how to approach this. I tried putting the async on gulp.task('watch', async function() { but that didn't work

Solution

  • Change

     var watchJs = gulp.watch(paths.js, ['scripts']),  // gulp v3 syntax

    to

     var watchJs = gulp.watch(paths.js, gulp.serie('scripts')),  //  gulp v4 syntax

    and your others like that. Find a migration guide for going from gulp v3 to v4.