Tiedostojen muutosten tarkkailu Gulpissa

Ei ole kovin kätevää kutsua komentoa konsolissa aina, kun on tarve suorittaa jokin muunnos - sillä koodia kirjoitettaessa sitä joutuu tekemään hyvin usein.

Siksi Gulpissa on sisäänrakennettu erityinen funktio watch tiedostojen muutosten tarkkailuun. Kun mikä tahansa seuratuista tiedostoista muuttuu, vastaava tehtävä käynnistyy automaattisesti.

Katsotaanpa esimerkkiä LESS:n muuntamisesta CSS:ksi. Aluksi otetaan käyttöön kaikki tarvittava:

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

Tehdään nyt tehtävä muuntamiseen:

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

Suoritetaan nyt anonyymin funktion vienti, jonka sisällä seuraamme muutoksia tiedostoissamme, kutsuen tässä tapauksessa tehtäväämme:

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

Käynnistyksen jälkeen komentorivillä pyörii "ikuinen" tehtävä. Tämä tarkoittaa, että tähän terminaaliin ei voi kirjoittaa muita komentoja. Voit keskeyttää tällaisen tehtävän suorituksen painamalla terminaalissa yhdistelmää Ctrl + C.

Voit seurata eri tiedostoryhmiä, liittämällä niihin eri tehtäviä:

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

Tai voit suorittaa sarjan tehtäviä yhdelle ryhmälle:

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