Erreur de gulp: la tâche de surveillance doit être une fonction

Voici mon gulpfile:

// Modules & Plugins
var gulp = require('gulp');
var concat = require('gulp-concat');
var myth = require('gulp-myth');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var imagemin = require('gulp-imagemin');

// Styles Task
gulp.task('styles', function() {
    return gulp.src('app/css/*.css')
        .pipe(concat('all.css'))
        .pipe(myth())
        .pipe(gulp.dest('dist'));
});

// Scripts Task
gulp.task('scripts', function() {
    return gulp.src('app/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Images Task
gulp.task('images', function() {
    return gulp.src('app/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

// Watch Task
gulp.task('watch', function() {
    gulp.watch('app/css/*.css', 'styles');
    gulp.watch('app/js/*.js', 'scripts');
    gulp.watch('app/img/*', 'images');
});

// Default Task
gulp.task('default', gulp.parallel('styles', 'scripts', 'images', 'watch'));

Si je lance le images, scriptsou la csstâche seul cela fonctionne. J'ai dû ajouter le returndans les tâches - ce n'était pas dans le livre mais googler m'a montré que c'était nécessaire.

Le problème que j'ai est que les defaulterreurs de tâche:

[18:41:59] Error: watching app/css/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/gulp/index.js:28:11)
    at /media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/gulpfile.js:36:10
    at taskWrapper (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:287:14)
    at runBound (domain.js:300:12)
    at asyncRunner (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/async-done/index.js:36:18)
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)
    at Function.Module.runMain (module.js:444:11)
    at startup (node.js:136:18)

Je pense que c'est parce qu'il n'y a pas non plus returndans la tâche de surveillance. De plus, le message d'erreur n'est pas clair - du moins pour moi. J'ai essayé d'ajouter un returnaprès le dernier gulp.watch()mais cela n'a pas fonctionné non plus.

Dans gulp 3.x, vous pouvez simplement passer le nom d'une tâche pour gulp.watch()aimer ceci:

gulp.task('watch', function() {
  gulp.watch('app/css/*.css', ['styles']);
  gulp.watch('app/js/*.js', ['scripts']);
  gulp.watch('app/img/*', ['images']);
});

Dans gulp 4.x, ce n'est plus le cas. Vous devez passer une fonction. La manière habituelle de faire cela dans gulp 4.x est de passer un gulp.series()appel avec un seul nom de tâche. Cela renvoie une fonction qui exécute uniquement la tâche spécifiée:

gulp.task('watch', function() {
  gulp.watch('app/css/*.css', gulp.series('styles'));
  gulp.watch('app/js/*.js', gulp.series('scripts'));
  gulp.watch('app/img/*', gulp.series('images'));
});

Merci pour tout

gulp.task('watch', function(){
    gulp.watch('app/sass/**/*.sass', gulp.series('sass'));
});

pour la version gulp 4.xx

GULP-V4.0

Il est un peu tard pour répondre maintenant mais quand même. J'étais également coincé dans ce problème et c'est ainsi que je l'ai fait fonctionner.

Analyse détaillée de ce que je faisais mal

1. J'ai oublié d'appeler la fonction de rechargement lorsque watchj'ai remarqué des changements dans mes fichiers html.
2. Depuis fireUpet KeepWatchingbloquent. Ils doivent être démarrés en parallèle plutôt qu'en série. J'ai donc utilisé la fonction parallèle dans la course variable.

Cela a fonctionné pour moi dans Gulp 4.0

gulp.task('watch', function() {
      gulp.watch('src/images/*.png', gulp.series('images'));
      gulp.watch('src/js/*.js', gulp.series('js'));
      gulp.watch('src/scss/*.scss', gulp.series('css'));
      gulp.watch('src/html/*.html', gulp.series('html'));
});

// Vérifiez ce qui a fonctionné pour moi

gulp.task('watch', function(){
    gulp.watch('css/shop.css', gulp.series(['shop']));
});