Gulpда ҳужжатлар ўзгаришини кузатиш

Ҳар сафар қандайдир ўзгартириш амалга ошириш учун консолда буйруқни чақириш жуда қулай эмас - чунки код ёзганда бу жуда tez-tez амалга оширилади.

Шу сабабдан Gulpда файллар ўзгаришини кузатиш учун watch номусус функция мавжуд. Кузатилаётган файлларнинг биронтаси ўзгарганда, мос вазифа автоматик тарзда ишга тушади.

Келинг, LESSни CSSга ўзгартириш мисолида кўриб чиқайлик. Бошлаб, зарур барча нарсаларни улаймиз:

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

Энди ўзгартириш учун вазифа яратайлик:

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

Энди номаълум функцияни экспорт қиламиз, ичида биз файллар ўзгаришини кузатиб туриб, бу ҳолда ўз вазифамизни чақирамиз:

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

Команд сатрида ишга туширгандан сўнг "мангу" вазифа айланиб туради. Демак, бу терминалга бошқа буйруқларни киритиб бўлмайди. Бундай вазифани терминалда Ctrl + C комбинациясини босиб тўхтатиш мумкин.

Турли файл гуруҳларини кузатиб, уларга турли вазифаларни боглаш мумкин:

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

Ёки бир гуруҳ учун вазифалар силсиласини бажариш мумкин:

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

Сизда JavaScript файллар гуруҳи бор деб фараз қилайлик. Ушбу файллар битта файлга бириктирилиши, сўнгра бу файлни минимизация қилиниши учун тартиб яратинг. Бизнинг файлларнинг биронтаси ўзгарганда вазифа бажарилиши учун тартиб яратинг.