1. ホーム
  2. javascript

[解決済み] Gulps gulp.watchが新規ファイルや削除されたファイルに対してトリガーされない?

2022-05-05 11:27:39

質問

以下のGulpjsタスクは、glob matchでファイルを編集しても問題なく動作します。

// watch task.
gulp.task('watch', ['build'], function () {
    gulp.watch(src + '/js/**/*.js', ['scripts']);
    gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
    gulp.watch(src + '/less/*.less', ['styles']);
    gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});

// build task.
gulp.task('build', ['clean'], function() {
    return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});

しかし、新しいファイルや削除されたファイルでは動作しない(トリガーされない)。何か見落としがあるのでしょうか?

EDIT : grunt-watchプラグインを使ってもダメなようです。

gulp.task('scripts', function() {
    return streamqueue(
        { objectMode: true },
        gulp.src([
            vendor + '/jquery/dist/jquery.min.js',
            vendor + '/bootstrap/dist/js/bootstrap.min.js'
        ]),
        gulp.src([
            src + '/js/**/*.js'
        ]).pipe(plugins.uglify())
    )
    .pipe(plugins.concat(pkg.name + '.min.js'))
    .pipe(gulp.dest(dest + '/js/'));
});

gulp.task('watch', ['build'], function () {
    plugins.watch({glob: src + '/js/**/*.js'}, function () {
        gulp.start('scripts');
    });
});

EDIT : 解決済み、でした。 この問題 . で始まるグローブ ./ (の値でした)。 src )はATMでは動作しないようです。

解決方法は?

編集する。 どうやら gulp.watch は、新しいファイルや削除されたファイルでも動作するようになりました。 質問されたときは、そうではありませんでした。

残りの回答はまだ有効です。 gulp-watch は、変更されたファイルに対してのみ特定のアクションを実行できるため、通常はより良いソリューションです。 gulp.watch は完全なタスクを実行するだけです。 適度な大きさのプロジェクトでは、これはすぐに遅すぎて役に立たなくなるでしょう。


何も見逃しているわけではありません。 gulp.watch は、新しいファイルや削除されたファイルでは動作しません。 これは、シンプルなプロジェクトのために設計されたシンプルなソリューションです。

新しいファイルを探すことができるファイルウォッチを取得するには その gulp-watch プラグイン の方がはるかに強力です。 使い方はこんな感じです。

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

// in a task
watch({glob: <<glob or array of globs>> })
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
    gulp.start( <<task name>> );
});

個人的には、最初のオプションをお勧めします。 これにより、ファイルごとの処理をより高速に行うことができます。 ファイルを連結していない限り、livereloadを使った開発ではとても有効です。

ストリームをラップするには マイ lazypipe ライブラリ とか、単に関数を使って stream-combiner このように

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch({glob: 'src/scripts/**/*.js' })
        .pipe(scriptsPipeline());


アップデイト 2014年10月15日(木

下記の @pkyeck さんのご指摘の通り、どうやら 1.0 リリースでは gulp-watch は、フォーマットを若干変更したため、上記の例は、現在、そうなっているはずです。

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

// in a task
watch(<<glob or array of globs>>)
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
    gulp.start( <<task name>> );
});

そして

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch('src/scripts/**/*.js')
        .pipe(scriptsPipeline());