Wie kann ich mehrere Dateien Gulp-Watch?

Ich habe so etwas:

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

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

});

Dies funktioniert jedoch nicht, da zwei Verzeichnisse, das Verzeichnis sass und das Layoutlayout, auf Änderungen überwacht werden.

Wie bringe ich es zum Laufen, damit gulp alles beobachtet, was in diesen Verzeichnissen passiert?

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

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

});

sass/**/*.scssund layouts/**/*.cssüberwacht jedes Verzeichnis und Unterverzeichnis auf Änderungen an .scssund .cssDateien, die sich ändern. Wenn Sie dies in eine Datei ändern möchten, machen Sie das letzte Bit*.*

Sie können eine Uhr wie diese schreiben.

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

Auf diese Weise können Sie über den Dateipfad der zu überwachenden Aufgaben und den Namen der von Ihnen erstellten Aufgabe beliebig viele Aufgaben einrichten. Dann können Sie Ihren Standard wie folgt schreiben:

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

Wenn Sie einfach nach verschiedenen Dateiänderungen suchen möchten, beobachten Sie Dateien einfach mit glob wie *.cssin Ihrer Aufgabe.

Ein Problem, das bei mehreren Personen (einschließlich mir) aufgetreten ist, besteht darin, dass das Hinzufügen eines gulp.filter außerhalb der Aufgabe dazu führt, dass gulp.watch nach dem ersten Durchgang fehlschlägt. Also, wenn Sie so etwas haben:

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

Dann müssen Sie es ändern in:

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

Der Filter muss in der Taskfunktion enthalten sein. Hoffe das hilft jemandem.

Das funktioniert bei mir (Gulp 4):

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

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

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

Die Antwort von @AJ Alger hat bei der Verwendung von Gulp v3.x für mich funktioniert.

Aber ab Gulp 4 scheint Folgendes für mich zu funktionieren.

Beachten Sie, dass jede Aufgabe einen Wert zurückgeben oder "done ()" aufrufen muss. Die Hauptaufgabe in diesem Beispiel ist 'watchSrc', die parallel die anderen Aufgaben aufruft.

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()
})

Wenn Sie Ihre Aufgaben in Funktionen umwandeln

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

Es gibt dann 2 nützliche Methoden, die Sie verwenden können:

GULP.SERIES führt die Aufgaben synchron aus

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

GULP.PARALLEL führt sie asynchron aus

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