Error de trago: la tarea de vigilancia tiene que ser una función

126

Aquí está mi 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 ejecuto la tarea images, scriptso csssolo, funciona. Tuve que agregar las returntareas; esto no estaba en el libro, pero buscar en Google me mostró que esto era necesario.

El problema que tengo es que los defaulterrores de la tarea:

[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)

Creo que es porque tampoco hay ninguna returntarea en el reloj. Además, el mensaje de error no es claro, al menos para mí. Intenté agregar un returndespués del último, gulp.watch()pero tampoco funcionó.

Arnold Rimmer
fuente

Respuestas:

354

En gulp 3.x, simplemente podría pasar el nombre de una tarea gulp.watch()así:

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 este ya no es el caso. Usted tiene que pasar una función. La forma habitual de hacer esto en gulp 4.x es pasar una gulp.series()invocación con un solo nombre de tarea. Esto devuelve una función que solo ejecuta la tarea especificada:

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'));
});
Sven Schoenung
fuente
13
Entonces, una serie de una función ... un poco extraño, ¿no?
MonsieurNinja
Gracias ... // watch 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 '));});
Wasim Khan
1
Me quedé atascado hasta que me di cuenta stylesde que gulp.series('styles'));es una función. En mi caso, lo había sassdefinido como función, pero tomé lo que estaba en el ( )como destino. Para cualquiera que haya seguido los tutoriales de "Gulp for Beginners" y se haya quedado atascado, la solución es reemplazar la línea gulp.watch('app/scss/**/*.scss', ['sass']);congulp.watch('app/sass/**/*.sass', gulp.series('sass'));
YCode
¿Cuál es la diferencia por cierto gulp.watch('app/sass/**/*.sass', gulp.series('sass'));y gulp.watch('app/sass/**/*.sass', gulp.series['sass']);? Probé ambas líneas y no vi ningún cambio, pero estoy seguro de que hay una diferencia (que vendrá a atormentarme más adelante).
YCode
19

Gracias por todo

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

para la versión gulp 4.xx

Alexandr Kutsenko
fuente
Debería sergulp.series('sass')
Tony Bui
No, no es necesario que sea una serie si es solo una tarea.
Vortilion
18

GULP-V4.0

Es un poco tarde para responder esto ahora mismo, pero aún así. Yo también estaba atrapado en este problema y así es como lo hice funcionar. Estructura del trago

Análisis detallado de lo que estaba haciendo mal

  1. Olvidé llamar a la función de recarga cuando watchnoté algunos cambios en mis archivos html.
  2. Desde fireUpy KeepWatchingestamos bloqueando. Deben iniciarse en paralelo en lugar de en serie. Entonces usé la función paralela en la variable run.
cafebabe1991
fuente
4

Me funcionó en 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'));
});
Wasim Khan
fuente
0

// Comprueba lo que funcionó para mí

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