Gulp - Reloj

El método Watch se usa para monitorear sus archivos fuente. Cuando se realizan cambios en el archivo de origen, el reloj ejecutará una tarea adecuada. Puede utilizar la tarea "predeterminada" para observar los cambios en los archivos HTML, CSS y JavaScript.

Actualizar tarea predeterminada

En el capítulo anterior, aprendió cómo tragar la combinación de tareas usando la tarea predeterminada. Usamos gulp-minify-css, gulp-autoprefixer y gulp-concatplugins, y creamos la tarea de estilos para minimizar los archivos CSS.

Para ver el archivo CSS, necesitamos actualizar la tarea 'predeterminada' como se muestra en el siguiente código:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

Todos los archivos CSS debajo work/src/styles/ Se supervisará la carpeta y si se realizan cambios en estos archivos, se ejecutará la tarea de estilos.

Ejecutar tarea predeterminada

Ejecute la tarea 'predeterminada' con el siguiente comando.

gulp

Después de ejecutar el comando anterior, recibirá el siguiente resultado.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

Siempre que se realicen cambios en los archivos CSS, recibirá el siguiente resultado.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

El proceso Watch permanecerá activo y responderá a sus cambios. Puedes presionarCtrl+Cpara terminar el proceso de monitoreo y regresar a la línea de comando.