Gulps gulp.watchは、新規または削除されたファイルに対してトリガーされませんか?


151

次のGulpjsタスクは、glob一致のファイルを編集するときに正常に機能します。

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

ただし、新しいファイルや削除されたファイルでは機能しません(トリガーされません)。行方不明のものはありますか?

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

編集:解決しました、それはこの問題でした。./(の値であったsrc)で始まるグロブは、ATMが機能していないようです。


2
受け入れられた回答をネストルウルキザからの回答に変更すると、すばらしいでしょう。それは、追加のプラグインを追加するのではなく、ここでの本当の答えです
Justin Noel

@alexkの答えは最も単純で、を追加する必要はありませんでしたgulp-watch。例:gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

回答:


130

編集:どうやら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());

助けてくれてありがとう、それでも動作しません。私はGulpを初めて使用し(Gruntを数回使用したことがあります)、おそらく私の主なタスクは間違っています... 私の更新された質問を参照してください。
グレモ2014年

18
github.com/floatdrop/gulp-watch/issues/1 './'で始まるグロブが出力されません。私のsrc変数は正確に「-/」です。問題が見つかりました!ありがとう!
グレモ

1
そのバグを見つけるのに十分な注意が必要です。うまくいけば、他の誰かがそれに遭遇した場合に役立ちます!
OverZealous 14年

@JHannes何に返信しますか?それがこの答えが説明していることです。
OverZealous、2014年

2
gulp.startは、非公開のAPIメソッドの呼び出しです。タスクを実行する別の方法はありますか?
Richard Collette

87

gulp.watch()require('gulp-watch')()は両方とも新規/削除されたファイルに対してトリガーされますが、絶対ディレクトリを使用する場合はトリガーされません。私のテストでは、"./"BTWの相対ディレクトリには使用しませんでした。

ただし、ディレクトリ全体が削除されても、どちらもトリガーされません。

   var watch = require('gulp-watch');
   //Wont work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though.
   //gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {

   //gulp.watch('src/app1/reports/**/*', function (event) {
   // console.log('*************************** Event received in gulp.watch');
   // console.log(event);
   // gulp.start('localDeployApp');
   });

   //Won't work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
   //watch(config.localDeploy.path + '/reports/**/*', function() {

   watch('src/krfs-app/reports/**/*', function(event) {
      console.log("watch triggered");
      console.log(event);
      gulp.start('localDeployApp');
   //});

2
素晴らしくシンプルな答え。
Edgar Martinez、


1
これありがとう。gulp-watch新しいファイルまたは削除されたファイルをトリガーするために適切に動作するようにしようとしていただけです。必要なし!gulp.watchこれを行います。./パスからすべてを削除すると、問題が解決しました。驚くばかり。
Qodesmith、2015

2
これはおそらく正しい答えになるはずです。監視する別のプラグインをインストールするのはそれほど面倒ではありませんでした。すべてのグロブから./を削除し、完全に機能しました!ありがとう!
根治

1
これは最良の答えです。追加のモジュールは必要ありませんし、クレイジーな構文を理解する必要もありません。
realappie 2016

57

srcが(で始まる/)絶対パスの場合、コードは新しいファイルや削除されたファイルを検出しません。ただし、まだ方法があります。

の代わりに:

gulp.watch(src + '/js/**/*.js', ['scripts']);

書く:

gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

そしてそれはうまくいきます!


12
{ cwd: src }ヒントは、私の解決策でした。どうもありがとうございました!
ワイヤードルフィン2016

1
@alexkに感謝します。{cwd:src}で問題が解決しました。
kaxi1993

@DanielTononは誤ってファイルの配列の中に入れましたか?の直接的なパラメータである必要がありますwatch

配列にすることはできませんか?まあそれは吸う。除外についてはどうですか?ソースファイルを配列に入れずに除外を利用することはできません。
Daniel Tonon

4
すばらしい答えです。さらに追加するには、すべてのグロブパターンを変更したくない場合は{cwd:'./'}、グロブパターンをそのまま追加してそのままにしますgulp.watch('src/js/**/*.js', {cwd: './'}, ['scripts']);
Akash

7

グロブには個別のベースディレクトリを指定する必要があり、そのベースの場所をグロブ自体に指定しないでください。

あなたが持っている場合lib/*.js、それは現在の作業ディレクトリであるprocess.cwd()

GulpはGazeを使用してファイルを監視し、Gulp APIドキュメントでは、Gaze固有のオプションを監視機能に渡すことができることがわかります。gulp.watch(glob[, opts], tasks)

今すぐに視線ドキュメント我々は、現在の作業ディレクトリ(グロブベースDIR)であることを見つけることができますcwdオプション。

これがalexkの答えです。 gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);


3

これは古い質問であることはわかっていますが、私が思いついた解決策を投げると思いました。私が見つけたgulpプラグインはどれも、新しいファイルや名前が変更されたファイルを通知しません。したがって、私はモノクルを便利な関数でラップすることになりました。

この関数の使用例を次に示します。

watch({
    root: config.src.root,
    match: [{
      when: 'js/**',
      then: gulpStart('js')
    }, {
      when: '+(scss|css)/**',
      then: gulpStart('css')
    }, {
      when: '+(fonts|img)/**',
      then: gulpStart('assets')
    }, {
      when: '*.+(html|ejs)',
      then: gulpStart('html')
    }]
  });

gulpStartも、私が作成した便利な関数であることに注意してください。

そして、これが実際の時計モジュールです。

module.exports = function (options) {
  var path = require('path'),
      monocle = require('monocle'),
      minimatch = require('minimatch');

  var fullRoot = path.resolve(options.root);

  function onFileChange (e) {
    var relativePath = path.relative(fullRoot, e.fullPath);

    options.match.some(function (match) {
      var isMatch = minimatch(relativePath, match.when);
      isMatch && match.then();
      return isMatch;
    });
  }

  monocle().watchDirectory({
    root: options.root,
    listener: onFileChange
  });
};

かなりシンプルですね。すべては私のgulpスターターキットで見つけることができます:https : //github.com/chrisdavies/gulp_starter_kit


1
こんにちは、十分な人々がこれのための小道具を与えていません!それは魅力のように機能します、ありがとうございました。(答えは「gulpStart」の機能を省略しているため、混乱を招く可能性があります。興味がある場合は、リンクにアクセスしてutilsフォルダに移動するだけです)
Augie Gardner


0

新しい/名前変更/削除されたファイルには、gulp.watchの代わりに 'gulp-watch'を使用する必要があります

var gulpwatch = require('gulp-watch');
var source = './assets',  
destination = './dest';
gulp.task('copy-changed-assets', function() {
    gulpwatch(source+'/**/*', function(obj){
        gulp.src( obj.path, { "base": source})
        .pipe(gulp.dest(destination));
    });
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.