Erro de gole: a tarefa de observação deve ser uma função

125

Aqui está o meu 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'));

Se eu executar o images,scriptscss tarefa ou sozinha, ela funcionará. Eu tive que adicionar as returntarefas - isso não estava no livro, mas o Google me mostrou que isso era necessário.

O problema que tenho é que os defaulterros da tarefa:

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

Eu acho que é porque também não há returnna tarefa de observação. Além disso, a mensagem de erro não é clara - pelo menos para mim. Tentei adicionar um returnapós o último, gulp.watch()mas isso também não funcionou.

Arnold Rimmer
fonte

Respostas:

351

No gulp 3.x, você pode passar o nome de uma tarefa para gulp.watch():

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

No gulp 4.x, esse não é mais o caso. Você precisa passar uma função. A maneira usual de fazer isso no gulp 4.x é passar uma gulp.series()invocação com apenas um nome de tarefa. Isso retorna uma função que executa apenas a tarefa 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
fonte
13
Então, uma série de uma função ... um pouco estranha, não é?
MonsieurNinja
Obrigado ... // assista 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
Ficou preso até que eu percebi stylesem gulp.series('styles'));uma função. No meu caso, eu havia sassdefinido como uma função, mas peguei o que estava no ( )como destino. Para quem segue os tutoriais "Gulp for Beginners" e ficou preso, a solução é substituir a linha gulp.watch('app/scss/**/*.scss', ['sass']);porgulp.watch('app/sass/**/*.sass', gulp.series('sass'));
YCode 13/02/19
Qual é a diferença entre gulp.watch('app/sass/**/*.sass', gulp.series('sass'));e gulp.watch('app/sass/**/*.sass', gulp.series['sass']);? Testei as duas linhas e não vi mudanças, mas tenho certeza de que há uma diferença (que virá a me assombrar mais tarde).
YCode 13/02/19
18

obrigado por tudo

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

para a versão gulp 4.xx

Alexandr Kutsenko
fonte
Deveria sergulp.series('sass')
Tony Bui
Não, não precisa ser uma série, se for apenas uma tarefa.
Vortilion
18

GULP-V4.0

É um pouco tarde para responder isso agora, mas ainda assim. Eu também estava preso nesse problema e foi assim que o fiz funcionar. Estrutura de Gole

Análise detalhada do que eu estava fazendo de errado

  1. Esqueci de chamar a função reload quando watchpercebi algumas alterações nos meus arquivos html.
  2. Desde fireUpe KeepWatchingestão bloqueando. Eles precisam ser iniciados em paralelo, e não em série. Então, eu usei a função paralela na execução variável.
cafebabe1991
fonte
4

Funcionou para mim no 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
fonte
0

// Veja o que funcionou para mim

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