web-dev-qa-db-fra.com

Gulp error: 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 j'exécute la tâche images, scripts ou css, cela fonctionne. Je devais ajouter le return dans 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 la tâche default erreurs:

[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 de 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 cela n'a pas fonctionné non plus.

javascriptgulp
77
Arnold Rimmer

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

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

En gulp 4.x, ce n'est plus le cas. Vous avez pour passer une fonction. La manière habituelle de procéder dans gulp 4.x consiste à passer une invocation gulp.series() avec un seul nom de tâche. Cela retourne 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'));
});
248
Sven Schoenung

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 c'est comme ça que je l'ai fait fonctionner. Gulp structure

En analyse détaillée ce que je faisais mal

  1. J'ai oublié d'appeler la fonction de rechargement lorsque le watch a remarqué des modifications dans mes fichiers HTML.
  2. Depuis fireUp et KeepWatching bloquent. 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.
15
cafebabe1991

merci pour tout

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

pour la version gulp 4.xx

13
Alexandr Kutsenko

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