Наблюдение за изменением документов в 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 файлов. Сделайте так, чтобы эти файлы сливались в один файл, а затем выполнялась минимизация этого файла. Сделайте так, чтобы задача выполнялась при изменении любого из наших файлов.