Gulp-Fehler: Watch-Aufgabe muss eine Funktion sein

Hier ist meine 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'));

Wenn ich das oder die Aufgabe alleine ausführe images, funktioniert es. Ich musste das in den Aufgaben hinzufügen - das war nicht im Buch, aber googeln zeigte mir, dass dies erforderlich war.scriptscssreturn

Das Problem, das ich habe, ist, dass die defaultAufgabe Fehler:

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

Ich denke es liegt daran, dass es auch keine returnin der Watch-Aufgabe gibt. Auch die Fehlermeldung ist nicht klar - zumindest für mich. Ich habe versucht, ein returnnach dem letzten hinzuzufügen, gulp.watch()aber das hat auch nicht funktioniert.

In gulp 3.x können Sie einfach den Namen einer Aufgabe so übergeben, dass sie Ihnen gulp.watch()gefällt:

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 ist dies nicht mehr der Fall. Sie müssen eine Funktion übergeben. Die übliche Methode in gulp 4.x besteht darin, einen gulp.series()Aufruf mit nur einem Aufgabennamen zu übergeben. Dies gibt eine Funktion zurück, die nur die angegebene Aufgabe ausführt:

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

Danke für alles

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

für die Version gulp 4.xx.

GULP-V4.0

Es ist ein bisschen spät, dies jetzt zu beantworten, aber immer noch. Ich war auch in diesem Problem gefangen und so habe ich es zum Laufen gebracht.

Im Detail analysieren, was ich falsch gemacht habe

1. Ich habe vergessen, die Reload-Funktion aufzurufen, als ich watcheinige Änderungen in meinen HTML-Dateien bemerkte.
2. Da fireUpund KeepWatchingblockieren. Sie müssen parallel und nicht seriell gestartet werden. Also habe ich die Parallelfunktion im Variablenlauf verwendet.

In Gulp 4.0 hat es bei mir funktioniert

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

// Überprüfe was bei mir funktioniert hat

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