Gulp 错误：监视任务必须是一个函数

Posted 2023-02-16

【中文标题】Gulp 错误：监视任务必须是一个函数

【英文标题】：Gulp error: watch task has to be a function

【发布时间】：2017-02-01 14:37:30

【问题描述】：

这是我的 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'));

如果我单独运行 images、scripts 或 css 任务，它就可以工作。我必须在任务中添加return - 这不在书中，但谷歌搜索告诉我这是必需的。

我遇到的问题是default 任务错误：

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

我认为是因为监视任务中也没有return。错误信息也不清楚 - 至少对我来说。我尝试在最后一个gulp.watch() 之后添加return，但这也不起作用。

【参考方案1】：

在 gulp 3.x 中，您可以像这样将任务名称传递给 gulp.watch()：

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

在 gulp 4.x 中不再是这种情况。你必须传递一个函数。在 gulp 4.x 中执行此操作的习惯方法是只传递一个带有一个任务名称的 gulp.series() 调用。这会返回一个只执行指定任务的函数：

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

【讨论】：

那么一系列的同一个函数……是不是有点奇怪？

谢谢... //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')); );

卡住了，直到我意识到gulp.series('styles')); 中的styles 是一个函数。就我而言，我将sass 定义为一个函数，但我将( ) 中的内容作为目标。对于遵循“Gulp for Beginners”教程并被卡住的任何人，解决方法是将gulp.watch('app/scss/**/*.scss', ['sass']); 替换为gulp.watch('app/sass/**/*.sass', gulp.series('sass'));

gulp.watch('app/sass/**/*.sass', gulp.series('sass')); 和 gulp.watch('app/sass/**/*.sass', gulp.series['sass']); 有什么区别？我测试了两条线，没有发现任何变化，但我确信有区别（稍后会困扰我）。

@MonsieurNinja 它形成了与并行的分离，它努力同时运行它，而不是串行运行一个接一个的任务，随后或作为一个系列。这是为了显式地而不是隐式地执行流程而发生的变化的结果。所以之前的任务执行系统是从 Gulp 3.x 大修到这里为 Gulp 4.x 解释的。消除串行与并行的歧义是为了某些任务可能会对其他任务产生不可估量的后果。这个有更清晰的解释fettblog.eu/gulp-4-parallel-and-series

【参考方案2】：

GULP-V4.0

现在回答这个问题有点晚了，但仍然如此。我也陷入了这个问题，这就是我让它工作的方式。

详细分析我做错了什么

当watch 注意到我的 html 文件发生了一些变化时，我忘记调用 reload 函数。 因为fireUp 和KeepWatching 被阻塞。它们需要并行而不是串行启动。所以我在变量run中使用了parallel函数。

【讨论】：

更喜欢使用代码块而不是屏幕截图

【参考方案3】：

谢谢大家

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

对于版本 gulp 4.xx

【讨论】：

应该是gulp.series('sass')

不，如果它只是一个任务，它不需要是一个系列。

@Vortilion ['taskName'] 表示您基本上是在传递一个列表，即使它只是一项任务......

【参考方案4】：

它在 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'));
);

【参考方案5】：

//检查什么对我有用

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