web-dev-qa-db-ja.com

複数のファイルをGulp-Watchする方法は？

私はこのようなものを持っています：

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() {
        gulp.run('css');
    });

});

ただし、sassとlayoutsディレクトリの2つのディレクトリの変更を監視するため、機能しません。

Gulpがそれらのディレクトリ内で発生するすべてを監視できるように、どのように機能させるのですか？

cssgulpgulp-watch
70
LoveAndHappiness
gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);

});

sass/**/*.scssおよびlayouts/**/*.cssは、.scssおよび.cssファイルへのすべての変更を監視します。これをanyファイルに変更する場合は、最後のビットを*.*にしてください

121
Kelly J Andrews

このような時計を書くことができます。

gulp.task('watch', function() {
    gulp.watch('path/to/file', ['gulp task name for css/scss']);
    gulp.watch('path/to/file', ['gulp task name for js']);
});

このようにして、見たいもののファイルパスの後に作成したタスクの名前を続けて、必要なだけタスクを設定できます。次に、次のようにデフォルトを記述できます。

gulp.task('default', ['gulp task name for css/scss', 'gulp task name for js']);

さまざまなファイルの変更を単に監視する場合は、タスクで*.cssのようなglobを使用してファイルを監視するだけです。

61
A. J. Alger

複数の人（私を含む）で発生した問題の1つは、タスクの外にgulp.filterを追加すると、最初のパスの後にgulp.watchが失敗することです。このようなものがある場合：

var filter = gulpFilter(['fileToExclude.js'])
gulp.task('newTask', function(){ ...

次に、次のように変更する必要があります。

gulp.task('newTask', function(){
  var filter = gulpFilter(['fileToExclude.js'])

フィルターはタスク関数に含める必要があります。それが誰かを助けることを願っています。

10
Lyra

これは私のために働きます（Gulp 4）：

function watchSass() {
  return gulp.watch(sassGlob, { ignoreInitial: false }, buildCss)
}

function watchImages() {
  return gulp.watch(imagesGlob, copyImages)
}

exports.watch = gulp.parallel(watchSass, watchImages)
6
Chintsu

@ A.J Algerの答えは、Gulp v3.xを使用したときに有効でした。

しかし、Gulp 4からは、次のことがうまくいくようです。

各タスクは値を返すか、「done（）」を呼び出す必要があることに注意してください。この例の主なタスクは、他のタスクを並行して呼び出す「watchSrc」です。

gulp.task('watchHtml', function(){
    return watch('src/**/*.html', function () {
        gulp.src('src/**/*')
            .pipe(gulp.dest(BUILD_DIR))
    })

})
gulp.task('watchJS', function(){
    return watch('src/**/*.js', 'devJS')
})

gulp.task('watchCSS', function(){
    return watch(['src/**/*.css', 'src/**/*.scss'], 'buildStyles')
})


gulp.task('watchSrc', gulp.parallel('watchHtml', 'watchJS', 'watchCSS'), function(done)
{
    done()
})
1
user6123723

タスクを関数に変換する場合

 function task1(){
   return gulp...
   ...
 }

次に、使用できる2つの便利な方法があります。

GULP.SERIESはタスクを同期的に実行します

gulp.task('default', gulp.series(task1,task2));

GULP.PARALLELはそれらを非同期に実行します

gulp.task('default', gulp.parallel(task1,task2));
0
Alessandro Catania