Monitoraggio delle modifiche ai documenti in Gulp

Non è molto conveniente richiamare ogni volta il comando nella console quando è necessario eseguire qualche trasformazione - dato che durante la scrittura del codice questo deve essere fatto molto frequentemente.

Pertanto, in Gulp è integrata una funzione speciale watch per monitorare le modifiche ai file. Quando uno qualsiasi dei file monitorati viene modificato, l'attività corrispondente verrà avviata automaticamente.

Diamo un'occhiata a un esempio di trasformazione da LESS a CSS. Per iniziare, colleghiamo tutto il necessario:

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

Ora creiamo un'attività per la trasformazione:

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

Ora esportiamo una funzione anonima, all'interno della quale monitoreremo le modifiche dei nostri file, richiamando in questo caso la nostra attività:

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

Dopo l'avvio, nella riga di comando verrà eseguita un'attività "eterna". Ciò significa che in questo terminale non sarà possibile inserire altri comandi. È possibile interrompere l'esecuzione di tale attività premendo nel terminale la combinazione Ctrl + C.

È possibile monitorare diversi gruppi di file, associandovi diverse attività:

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

Oppure è possibile eseguire una serie di attività per un gruppo:

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

Supponiamo che tu abbia un gruppo di file JavaScript. Configura il sistema in modo che questi file vengano uniti in un unico file, e che successivamente venga eseguita la minimizzazione di questo file. Configuralo in modo che l'attività venga eseguita quando uno qualsiasi dei nostri file viene modificato.