web-dev-qa-db-ja.com

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

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

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

編集：解決済み、それは この問題 でした。 ./（srcの値）で始まるグローブは、ATMが機能していないようです。

javascriptnode.jsgulp
151
gremo

編集：どうやら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を使用した開発中にうまく機能します。

my lazypipe library を使用するか、単純に関数と 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が指摘しているように、明らかにgulp-watchの1.0リリースはフォーマットをわずかに変更したため、上記の例は次のようになります。

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());
128
OverZealous

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

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

の代わりに：

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

書きます：

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

そしてそれは動作します！

56
alexk

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

lib/*.jsがある場合は、process.cwd()である現在の作業ディレクトリの下を確認します

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

Gaze doc では、現在の作業ディレクトリ（glob base dir）がcwdオプションであることがわかります。

それがalexkの答えにつながります：gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

7
Peter Perron

これは古い質問ですが、私が思いついた解決策を投げると思いました。私が見つけた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

2
Christopher Davies

Gulp.watchは、Windowsでは変更および削除されたファイルのみを報告するが、OSXではデフォルトで新規および削除されたファイルをリッスンするように見えることに注意することが重要です。

https://github.com/gulpjs/gulp/issues/675

1
Brian Ogden

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));
    });
});
0
Jitendra Saroj