web-dev-qa-db-fra.com

Comment Gulp-Watch Plusieurs fichiers?

J'ai quelque chose comme ça:

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

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

});

mais cela ne fonctionne pas, car il surveille les deux répertoires, sass et layouts.

Comment puis-je le faire fonctionner, de sorte que gulp surveille tout ce qui se passe dans ces répertoires?

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

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

});

sass/**/*.scss et layouts/**/*.css suivront dans chaque répertoire et sous-répertoire les modifications apportées aux fichiers .scss et .css qui changent. Si vous voulez changer cela en any file, créez le dernier bit *.*

114
Kelly J Andrews

Vous pouvez écrire une montre comme celle-ci.

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

De cette façon, vous pouvez configurer autant de tâches que vous le souhaitez via le chemin du fichier que vous souhaitez regarder, suivi du nom de la tâche que vous avez créée. Ensuite, vous pouvez écrire votre valeur par défaut comme ceci:

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

Si vous voulez simplement surveiller les modifications de fichiers, regardez simplement les fichiers en utilisant glob comme *.css dans votre tâche. 

62
A. J. Alger

Un problème qui a surgi pour plusieurs personnes (y compris moi) est que l'ajout d'un gulp.filter en dehors de la tâche entraîne l'échec de gulp.watch après le premier passage. Donc, si vous avez quelque chose comme ça:

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

Ensuite, vous devez le changer pour:

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

Le filtre doit être inclus dans la fonction de tâche. J'espère que ça aide quelqu'un.

10
Lyra

Cela fonctionne pour moi (Gulp 4):

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

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

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

@ A.J La réponse d'Alger a fonctionné pour moi avec Gulp v3.x. 

Mais en commençant par Gulp 4, ce qui suit semble fonctionner pour moi. 

Notez que chaque tâche doit renvoyer une valeur ou appelez "done ()". La tâche principale dans cet exemple est 'watchSrc' qui appelle en parallèle les autres tâches.

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

Si vous convertissez vos tâches en fonctions

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

Il existe alors 2 méthodes utiles que vous pouvez utiliser:

GULP.SERIES exécutera les tâches de manière synchrone

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

GULP.PARALLEL les exécutera de manière asynchrone

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