Monitorizarea modificărilor documentelor în Gulp

Nu este foarte convenabil să execuți de fiecare dată comanda în consolă atunci când trebuie să efectuezi o transformare - la urma urmei, atunci când scrii cod trebuie să faci acest lucru foarte des.

De aceea, Gulp are o funcție specială încorporată watch pentru monitorizarea modificărilor fișierelor. Când oricare dintre fișierele urmărite se modifică, task-ul corespunzător va fi pornit automat.

Să ne uităm la un exemplu de transformare LESS în CSS. Pentru început, să includem tot ce este necesar:

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

Acum să creăm un task pentru transformare:

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

Acum să exportăm o funcție anonimă, în interiorul căreia vom urmări modificările fișierelor noastre, apelând în acest caz task-ul nostru:

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

După pornire, în linia de comandă se va roti un task "etern". Aceasta înseamnă că în acest terminal nu se vor putea introduce alte comenzi. Poți întrerupe executarea unui astfel de task apăsând în terminal combinația Ctrl + C.

Poți urmări diferite grupuri de fișiere, asociind cu ele diferite task-uri:

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

Sau poți executa o serie de task-uri pentru un grup:

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

Să presupunem că ai un grup de fișiere JavaScript. Fă astfel încât aceste fișiere să fie unite într-un singur fișier, iar apoi să se execute minimizarea acestui fișier. Fă astfel încât task-ul să se execute la modificarea oricăruia dintre fișierele noastre.