A dokumentumváltozások megfigyelése Gulp-ban

Nem túl kényelmes minden alkalommal a konzolban futtatni egy parancsot, amikor valamilyen átalakítást kell végezni - hiszen a kódírás során ezt nagyon gyakran kell megtenni.

Ezért a Gulp beépített watch funkcióval rendelkezik a fájlok változásainak figyelésére. Amikor bármelyik figyelt fájl megváltozik, a megfelelő feladat automatikusan elindul.

Nézzünk egy példát a LESS CSS-sé alakítására. Először is importáljuk mind a szükségeset:

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

Most készítsünk egy feladatot az átalakításra:

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

Most exportáljunk egy anonim függvényt, amelyen belül figyeljük a fájljaink változásait, meghívva ebben az esetben a feladatunkat:

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

A futtatás után a parancssorban egy "örök" feladat fog futni. Ez azt jelenti, hogy ebbe a terminálba nem lehet más parancsokat beírni. Egy ilyen feladat végrehajtását a terminálban a Ctrl + C billentyűkombináció megnyomásával szakíthatja meg.

Különböző fájlcsoportokat lehet figyelni, és különböző feladatokat rendelni hozzájuk:

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

Vagy egy csoporthoz egy feladatsorozatot is futtathat:

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