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

Gulp error: watch task has to be a function

提问by Arnold Rimmer

Here is my gulpfile:

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

If I run the images, scriptsor csstask alone it works. I had to add the returnin the tasks - this wasn't in the book but googling showed me this was required.

如果我单独运行images,scripts或css任务，它会起作用。我不得不return在任务中添加- 这不在书中，但谷歌搜索显示这是必需的。

The problem I have is that the defaulttask errors:

我遇到的问题是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)

I think it is because there is also no returnin the watch task. Also the error message isn't clear - at least to me. I tried adding a returnafter the last gulp.watch()but that didn't work either.

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

回答by Sven Schoenung

In gulp 3.x you could just pass the name of a task to gulp.watch()like this:

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

In gulp 4.x this is no longer the case. You haveto pass a function. The customary way of doing this in gulp 4.x is to pass a gulp.series()invocation with only one task name. This returns a function that only executes the specified task:

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

回答by cafebabe1991

GULP-V4.0

GULP-V4.0

It is a bit late to answer this right now but still. I was stuck in this problem as well and this is how I got it working.

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

In detail analysis what I was doing wrong

详细分析我做错了什么

1. I forgot to call the reload function when the watchnoticed some changes in my html files.
2. Since fireUpand KeepWatchingare blocking. They need to be started in parallel rather than serially. So I used the parallel function in the variable run.

1. 当watch注意到我的 html 文件中有一些变化时，我忘记调用重新加载函数。
2. 由于fireUp和KeepWatching正在阻塞。它们需要并行启动，而不是串行启动。所以我在变量run中使用了parallel函数。

回答by Alexandr Kutsenko

thanks for all

谢谢大家

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

for version gulp 4.xx

对于版本 gulp 4.xx

回答by Wasim Khan

It worked for me in Gulp 4.0

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

回答by Ataki Stanley

//Check what worked for me

//检查什么对我有用

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