吞咽错误: 观看任务必须是一个函数

这是我的饮食档案:

// 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，但是也不起作用。

72468

小开

最佳答案

在 Gulp3.x 中，你可以像下面这样将任务名传递给 gulp.watch():

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

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

小开

GULP-V4.0

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

详细分析我做错了什么

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

小开

谢谢大家

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

对于版本 gulp4.xx

小开

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

小开

//检查什么为我工作

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

小开

在我的情况下，为我工作: (在 Gulpfile.js 中) (安装: 咕噜，咕噜)

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));


var cssDest = 'style';
var cssInputFile = 'source/style.scss';
var watchedFiles = 'source/**/*.scss';








gulp.task('buildcss', function(){
return gulp.src(cssInputFile)
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(gulp.dest(cssDest));
});


gulp.task('watch', function(){
gulp.watch(watchedFiles, gulp.series(['buildcss']));
});