Praćenje promena dokumenata u Gulp-u

Nije baš zgodno svaki put ručno pokretati komandu u terminalu kada je potrebno izvršiti neku transformaciju - ipak se to prilikom pisanja koda dešava veoma često.

Zbog toga Gulp ima ugrađenu specijalnu funkciju watch za praćenje promena fajlova. Pri promeni bilo kog od praćenih fajlova, odgovarajući zadatak će se automatski pokrenuti.

Pogledajmo na primeru transformacije LESS-a u CSS. Za početak, uvezimo sve potrebno:

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

Sada napravimo zadatak za transformaciju:

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

Sada ćemo izvesti anonimnu funkciju, unutar koje ćemo pratiti promene naših fajlova, pozivajući u tom slučaju naš zadatak:

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

Nakon pokretanja u komandnoj liniji će se okretati "večni" zadatak. To znači da se u ovaj terminal neće moći unositi druge komande. Izvršavanje ovakvog zadatka možete prekinuti pritiskom na kombinaciju Ctrl + C u terminalu.

Moguće je pratiti različite grupe fajlova, vezujući za njih različite zadatke:

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

A za jednu grupu može se izvršiti serija zadataka:

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

Recimo da imate grupu JavaScript fajlova. Uredite tako da se ovi fajlovi spoje u jedan fajl, a zatim izvrši minimizacija tog fajla. Uredite da se zadatak izvrši pri promeni bilo kog od naših fajlova.