Obserwacja zmian dokumentów w Gulp

Niezbyt wygodnie jest za każdym razem wywoływać polecenie w konsoli, gdy konieczne jest wykonanie jakiejś transformacji - przecież podczas pisania kodu trzeba to robić bardzo często.

Dlatego w Gulp wbudowana jest specjalna funkcja watch do obserwowania zmian plików. Przy zmianie dowolnego ze śledzonych plików odpowiednie zadanie zostanie uruchomione automatycznie.

Spójrzmy na przykładzie transformacji LESS na CSS. Na początek podłączmy wszystko, co niezbędne:

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

Teraz zróbmy zadanie na transformację:

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

Teraz wykonajmy eksport funkcji anonimowej, wewnątrz której będziemy śledzić zmiany naszych plików, wywołując w tym przypadku nasze zadanie:

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

Po uruchomieniu w wierszu poleceń będzie się kręcić "wieczne" zadanie. Oznacza to, że do tego terminala nie będzie można wpisywać innych poleceń. Przerwać wykonywanie takiego zadania można, naciskając w terminalu kombinację Ctrl + C.

Można śledzić różne grupy plików, przypisując do nich różne zadania:

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

A dla jednej grupy można wykonać serię zadań:

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