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));
};