Gulp - Assistir

O método Watch é usado para monitorar seus arquivos de origem. Quando qualquer alteração no arquivo de origem for feita, o relógio executará uma tarefa apropriada. Você pode usar a tarefa 'padrão' para observar as alterações nos arquivos HTML, CSS e JavaScript.

Atualizar Tarefa Padrão

No capítulo anterior, você aprendeu como engolir tarefas combinadas usando a tarefa padrão. Usamos gulp-minify-css, gulp-autoprefixer e gulp-concatplugins, e criamos tarefas de estilos para reduzir arquivos CSS.

Para assistir ao arquivo CSS, precisamos atualizar a tarefa 'padrão' conforme mostrado no seguinte 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 os arquivos CSS em work/src/styles/ A pasta será monitorada e após as alterações feitas nesses arquivos, a tarefa de estilos será executada.

Executar Tarefa Padrão

Execute a tarefa 'padrão' usando o seguinte comando.

gulp

Depois de executar o comando acima, você receberá a seguinte saída.

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

Sempre que qualquer alteração for feita nos arquivos CSS, você receberá a seguinte saída.

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

O processo de observação permanecerá ativo e responderá às suas alterações. Você pode pressionarCtrl+Cpara encerrar o processo de monitoramento e retornar à linha de comando.