GulpJS - entendendo o método watch()

Apesar de simples, o método watch() do GulpJS tem algumas particularidades que o tornam bastante poderoso!

Sintaxe

O método watch() tem duas possíveis sintaxes:

1
gulp.watch( glob, [, opts], tasks );

e:

1
gulp.watch( glob, [, opts, cb]);

Na primeira sintaxe, temos:

glob

Tipo: String ou Array

Um simples glob ou array de globs, que indicam quais arquivos devem ser assistidos, para saber quando foram alterados.

Exemplo de uso:

1
gulp.watch( 'src/js/**/*.js' );

Onde todos os arquivos .js, dentro do diretório src/js serão assistidos, recursivamente.

Recursão

Outro exemplo, com Array:

1
gulp.watch([ 'src/js/**/*.js', 'src/stylus/**/*.styl' ]);

Assiste todos os arquivos .js dentro de src/js, e todos os arquivos .styl, dentro de src/stylus, recursivamente.

opts

Tipo: Object

Opções, que são passadas para a lib Gaze, que o GulpJS usa para fazer o watch dos arquivos. As opções que você pode usar estão disponíveis em https://github.com/shama/gaze#properties

tasks

Tipo: Array

Um Array de tasks criadas com gulp.task(), que devem ser executadas, quando houver mudanças em qualquer dos arquivos passados em glob.

Exemplo:

1
gulp.watch( 'src/js/**/*.js', [ 'lint', 'uglify' ] );

As tarefas lint e uglify serão executadas sempre que um arquivo .js em src/js for alterado.

Você ainda pode usar eventos do NodeJS, para ter uma função callback que execute assim que os arquivos forem alterados:

1
2
3
4
var watcher = gulp.watch( 'src/js/**/*.js', [ 'lint', 'uglify' ] );
watcher.on( 'change', function( event ) {
  console.log( 'File' + event.path + ' was ' + event.type );
});

O callback tem como parâmetro o objeto event, que possui as propriedades path, com o caminho do arquivo, e type, com o tipo de evento disparado.

event.type pode ter 3 possíveis valores:

  • changed: quando um arquivo no caminho assistido é alterado;
  • deleted: quando um arquivo é deletado do caminho assistido;
  • added: Quando um novo arquivo é criado no caminho assistido.

A segunda sintaxe difere apenas no último parâmetro. Você pode passar uma função de callback no lugar de chamar tasks para executar. Essa função tem o mesmo parâmetro event mostrado anteriormente, quando usado com o método .on('change').

Problemas com event.type added no GulpJS

O GulpJS executa corretamente os eventos changed e deleted, mas quando você adiciona um novo arquivo, em alguns momentos o added não é disparado.

Já havia conversado com alguns amigos sobre isso, e estava confiante que era algum bug no GulpJS. Fiz algumas pesquisas por cima, mas não cheguei a nenhuma solução.

O problema era que, ao adicionar um novo arquivo, eu sempre teria que parar o watch(), criar os novos arquivos e então executar novamente o watch().

Mas hoje estava trocando uma ideia com o Rômulo, que estava passando pelo mesmo problema. Então, em meio a vários links dizendo que era “um problema mesmo”, “era bug do Gaze”, etc., ele encontrou um link onde dizia exatamente qual era o problema:

Havia uma issue aberta no Gaze, - que foi fechada, mas o problema continua - dizendo que isso acontecia quando se usava ./ no início do glob, no watch(). E o problema - e consequentemente, a solução - é exatamente esse!

Se você não colocar o ./ no início do glob, o GulpJS reconhece corretamente novos arquivos adicionados, sem precisar parar o watch()!

Uma grande descoberta :D

Bom, era isso que eu queria mostrar sobre o watch() hoje. O GulpJS nos dá muitas possibilidades de personalização, e você ainda vai cansar - ou não - de ler artigos legais sobre o Gulp aqui no blog :D

Até o próximo!

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1