Vëzhgimi i ndryshimeve të dokumenteve në Gulp

Nuk është shumë e përshtatshme të thirrni çdo herë komandën në konsol kur keni nevojë të kryeni ndonjë transformim - sepse gjatë shkrimit të kodit duhet ta bëni këtë shumë shpesh.

Prandaj, në Gulp është ndërtuar një funksion i veçantë watch për vëzhgimin e ndryshimeve të skedarëve. Kur ndryshon ndonjë nga skedarët e ndjekur, detyra përkatëse do të niset automatikisht.

Le të shohim një shembull të transformimit të LESS në CSS. Së pari le të lidhim të gjitha të nevojshmet:

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

Tani le të bëjmë një detyrë për transformimin:

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

Tani le të eksportojmë një funksion anonim, brenda të cilit do të ndjekim ndryshimet e skedarëve tanë, duke e thirrur në këtë rast detyrën tonë:

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

Pas nisjes në rreshtin e komandave do të rrotullohet një detyrë "e përhershme". Kjo do të thotë se në këtë terminal nuk do të mund të futni komanda të tjera. Mund ta ndërpreni ekzekutimin e një detyre të tillë duke shtypur në terminal kombinimin Ctrl + C.

Mund të ndiqni grupe të ndryshme skedarësh, duke i lidhur ato me detyra të ndryshme:

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

Ose mund të ekzekutoni një seri detyrash për një grup:

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