Gulp error: watch task phải là một hàm

Đây là gulpfile của tôi:

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

Nếu tôi chạy images, scriptshoặc cssnhiệm vụ một mình nó hoạt động. Tôi phải thêm các returnnhiệm vụ vào - điều này không có trong sách nhưng googling cho tôi thấy điều này là bắt buộc.

Vấn đề tôi gặp phải là defaultlỗi tác vụ:

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

Tôi nghĩ đó là bởi vì cũng không có returntrong nhiệm vụ đồng hồ. Ngoài ra, thông báo lỗi không rõ ràng - ít nhất là đối với tôi. Tôi đã thử thêm một returnsau cuối cùng gulp.watch()nhưng điều đó cũng không hoạt động.

Trong gulp 3.x, bạn có thể chỉ cần chuyển tên của một nhiệm vụ gulp.watch()như sau:

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

Trong gulp 4.x, điều này không còn xảy ra nữa. Bạn phải vượt qua một chức năng. Cách thông thường để thực hiện việc này trong gulp 4.x là chuyển một lệnh gulp.series()gọi chỉ có một tên tác vụ. Điều này trả về một hàm chỉ thực thi tác vụ được chỉ định:

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

cảm ơn vì tất cả

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

cho phiên bản gulp 4.xx

GULP-V4.0

Đó là một chút muộn để trả lời điều này ngay bây giờ nhưng vẫn còn. Tôi cũng bị mắc kẹt trong vấn đề này và đây là cách tôi làm cho nó hoạt động.

Phân tích chi tiết những gì tôi đã làm sai

1. Tôi đã quên gọi hàm tải lại khi watchnhận thấy một số thay đổi trong các tệp html của tôi.
2. Kể từ khi fireUpvà KeepWatchingđang chặn. Chúng cần được bắt đầu song song hơn là nối tiếp. Vì vậy, tôi đã sử dụng hàm song song trong lần chạy biến.

Nó hoạt động với tôi trong 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'));
});

// Kiểm tra những gì phù hợp với tôi

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