css - ejemplos - ¿Cómo Gulp-Watch múltiples archivos?

main html

Question

Tengo algo como esto:

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

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

});

pero no funciona, porque observa dos directorios, el sass y el directorio de diseños para cambios.

¿Cómo hago que funcione, para que Gulp vea todo lo que sucede dentro de esos directorios?

Answer 1

Esto funciona para mí (Gulp 4):

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

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

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

Answer 2

La respuesta de @AJ Alger funcionó para mí cuando usé Gulp v3.x.

Pero comenzando con Gulp 4, lo siguiente parece funcionar para mí.

Observe que cada tarea debe devolver un valor o llamar a "done ()". La tarea principal en este ejemplo es ''watchSrc'' que en paralelo llama a las otras tareas.

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

Answer 3

Puedes escribir un reloj como este.

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 esta forma, puede configurar tantas tareas como desee a través de la ruta del archivo de lo que desea ver seguido del nombre de la tarea que creó. Luego puede escribir su valor predeterminado de esta manera:

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

Si desea simplemente observar varios cambios en los archivos, simplemente mire los archivos usando glob like *.css en su tarea.

Answer 4

Si convierte sus tareas en funciones

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

Existen 2 métodos útiles que puede usar:

GULP.SERIES ejecutará las tareas sincrónicamente

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

GULP.PARALLEL los ejecutará asincrónicamente

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

Answer 5

Un problema que ha surgido para varias personas (incluido yo) es que agregar un filtro gulp.filter fuera de la tarea hace que gulp.watch falle después del primer pase. Entonces, si tienes algo como esto:

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

Entonces necesitas cambiarlo a:

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

El filtro debe incluirse en la función de tarea. Espero que ayude a alguien.

Answer 6

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

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

});

sass/**/*.scss and layouts/**/*.css observará todos los directorios y subdirectorios en busca de cambios en los archivos .scss y .scss que cambien. Si desea cambiar eso a cualquier archivo, haga el último bit *.*