Monitoraggio delle modifiche ai documenti in Gulp

Non è molto conveniente richiamare ogni volta il comando nella console quando è necessario eseguire qualche trasformazione - dato che durante la scrittura del codice questo deve essere fatto molto frequentemente.

Pertanto, in Gulp è integrata una funzione speciale watch per monitorare le modifiche ai file. Quando uno qualsiasi dei file monitorati viene modificato, l'attività corrispondente verrà avviata automaticamente.

Diamo un'occhiata a un esempio di trasformazione da LESS a CSS. Per iniziare, colleghiamo tutto il necessario:

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

Ora creiamo un'attività per la trasformazione:

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

Ora esportiamo una funzione anonima, all'interno della quale monitoreremo le modifiche dei nostri file, richiamando in questo caso la nostra attività:

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

Dopo l'avvio, nella riga di comando verrà eseguita un'attività "eterna". Ciò significa che in questo terminale non sarà possibile inserire altri comandi. È possibile interrompere l'esecuzione di tale attività premendo nel terminale la combinazione Ctrl + C.

È possibile monitorare diversi gruppi di file, associandovi diverse attività:

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

Oppure è possibile eseguire una serie di attività per un gruppo:

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