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


125

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

如果我运行imagesscriptscss单独的任务它的工作原理。我必须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监视任务中也没有。错误消息也不清楚-至少对我来说。我尝试return在最后一个之后添加a ,gulp.watch()但这也不起作用。

Answers:


352

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

13
所以一系列的功能...有点奇怪吗?
MonsieurNinja

谢谢... // 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
卡住了,直到我意识到stylesgulp.series('styles'));一个功能。就我而言,我已将sass其定义为一个函数,但我将其中的内容( )作为目标。对于任何人继“咕嘟咕嘟入门”教程和被困的解决方法是更换线gulp.watch('app/scss/**/*.scss', ['sass']);gulp.watch('app/sass/**/*.sass', gulp.series('sass'));
YCode

btw gulp.watch('app/sass/**/*.sass', gulp.series('sass'));和有gulp.watch('app/sass/**/*.sass', gulp.series['sass']);什么区别?我测试了这两条线,没有发现任何变化,但是我确信两者之间存在差异(稍后会困扰我)。
YCode

18

谢谢大家

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

对于版本gulp 4.xx


应该是gulp.series('sass')
Tony Bui

不,如果只是一项任务,则不必是一系列。
Vortilion

18

GULP-V4.0

现在但仍然要回答这个问题有点晚了。我也陷入了这个问题,这就是我如何使其工作的原因。 牙龈结构

详细分析我在做什么

  1. watch我注意到html文件中的某些更改时,我忘记了调用reload函数。
  2. 由于fireUpKeepWatching被阻止。它们需要并行而不是串行启动。所以我在变量运行中使用了并行函数。

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

0

//检查对我有用的

gulp.task('watch', function(){
    gulp.watch('css/shop.css', gulp.series(['shop']));
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.