Наблюдение за изменением документов в Gulp

Не е много удобно всеки път да се извиква команда в конзолата, когато е необходимо да се извърши някаква трансформация - в крайна сметка при писането на код това се налага да се прави много често.

Затова в 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 файлове. Направете така, че тези файлове да се сливат в един файл, а след това да се извърши минимизация на този файл. Направете така, че задачата да се изпълнява при промяна на който и да е от нашите файлове.