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

Не очень удобно каждый раз вызывать команду в консоли при необходимости выполнить какое-то преобразование - ведь при написании кода делать это приходится очень часто.

Поэтому в Gulp встроена специальная функция watch для наблюдения за изменением файлов. При изменении любого из отслеживаемых файлов соответствующая задача будет запущена автоматически.

Давайте посмотрим на примере преобразования LESS в CSS. Для начала давайте подключим все необходимое:

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

Теперь сделаем задачу на преобразование:

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

Теперь выполним экспорт анонимной функции, внутри которой будем отслеживать изменения наших файлов, вызывая в этом случае нашу задачу:

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

После запуска в командной строке будет крутится "вечная" задача. Это значит, что в этот терминал нельзя будет вбивать другие команды. Прервать выполнение такой задачи можно, нажав в терминале сочетание Ctrl + C.

Можно отслеживать различные группы файлов, привязывая к ним различные задачи:

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

А можно для одной группы выполнить серию задач:

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