Monitoramento de alterações de documentos no Gulp

Não é muito conveniente chamar um comando no console toda vez que precisamos executar alguma transformação - afinal, ao escrever código, isso precisa ser feito com muita frequência.

Portanto, o Gulp possui uma função embutida watch para monitorar alterações de arquivos. Quando qualquer um dos arquivos monitorados for alterado, a tarefa correspondente será executada automaticamente.

Vamos ver um exemplo de transformação de LESS para CSS. Primeiro, vamos importar tudo que é necessário:

let {src, dest, watch} = require('gulp');
let less = require('gulp-less');

Agora vamos criar uma tarefa para a transformação:

function task(cb) {
	return src('src/*.less')
		.pipe(less())
		.pipe(dest('dist'));
}

Agora vamos exportar uma função anônima, dentro da qual monitoraremos as alterações dos nossos arquivos, chamando nossa tarefa neste caso:

exports.default = function() {
	watch('src/*.less', task);
};

Após a execução, uma tarefa "eterna" ficará rodando no terminal. Isso significa que não será possível inserir outros comandos neste terminal. Para interromper a execução de tal tarefa, pressione no terminal a combinação Ctrl + C.

É possível monitorar diferentes grupos de arquivos, associando a eles diferentes tarefas:

exports.default = function() {
	watch('src/*.less', task1);
	watch('src/*.sass', task1);
};

Ou pode-se executar uma série de tarefas para um mesmo grupo:

exports.default = function() {
	watch('src/*.less', series(task1, task2));
};

Suponha que você tenha um grupo de arquivos JavaScript. Configure para que esses arquivos sejam mesclados em um único arquivo e, em seguida, seja realizada a minificação desse arquivo. Configure para que a tarefa seja executada quando qualquer um dos nossos arquivos for alterado.