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

Question

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 , scripts o css tâche seule, ça marche. J'ai dû ajouter le return dans les tâches - ce n'était pas dans le livre mais une recherche sur Google m'a montré que c'était nécessaire.

Le problème que j'ai est que le default les erreurs de tâches :

[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 return dans 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 return après le dernier gulp.watch() mais ça n'a pas marché non plus.

Answer 1

Dans gulp 3.x, vous pouviez simplement passer le nom d'une tâche à gulp.watch() comme ça :

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 ont pour passer une fonction. La façon habituelle de faire cela dans gulp 4.x est de passer une fonction gulp.series() avec un seul nom de tâche. Cela renvoie une fonction qui n'exécute que 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'));
});

Answer 2

GULP-V4.0

Il est un peu tard pour répondre à cette question maintenant mais quand même. J'étais aussi coincé dans ce problème et voici comment je l'ai fait fonctionner.

Analyse en détail de ce que je faisais mal

1. J'ai oublié d'appeler la fonction de rechargement lorsque le watch J'ai remarqué quelques changements dans mes fichiers html.
2. Desde fireUp y KeepWatching sont bloqués. 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 variable run.

Answer 3

Merci pour tout

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

pour la version gulp 4.xx

Answer 4

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'));
});

Answer 5

//Check what worked for me

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