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

imagesscriptsまたは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ウォッチタスクにも無いからだと思います。また、エラーメッセージは明確ではありません-少なくとも私には。return最後にを追加してみましたgulp.watch()が、うまくいきませんでした。

回答:


351

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()1つのタスク名のみで呼び出しを渡すことです。これは指定されたタスクのみを実行する関数を返します:

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
つまり、一連の1つの関数...少し奇妙ではないですか?
MonsieurNinja 2016

ありがとう... // 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
私は実現までのガットは立ち往生stylesしてgulp.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-V4.0

今これに答えるのは少し遅れますが、それでもまだです。私もこの問題に悩まされていて、これが私がそれを機能させた方法です。 ガップ構造

詳細分析で私が間違っていたこと

  1. watchhtmlファイルに変更が加えられていることに気付いたときに、reload関数を呼び出すのを忘れました。
  2. 以来fireUpKeepWatchingブロックしています。シリアルではなく、並行して開始する必要があります。したがって、変数runで並列関数を使用しました。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.