Tiedostojen käsittely Gulpissa

Gulp mahdollistaa tiedostoryhmän ottamisen, jonkin operaation suorittamisen tällä ryhmällä ja sitten muuttuneiden tiedostojen sijoittamisen uuteen osoitteeseen.

Tätä varten on tarkoitettu erityisfunktiot src ja dest. Tuodaan ne aluksi kirjastostamme:

javascriptlet {src, dest} = require('gulp');

src -funktio mahdollistaa määritetyn tiedoston saamisen:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return cb-funktion kutsun sijaan
}

Tämän tiedoston kanssa voidaan sitten ketjussa suorittaa erilaisia operaatioita pipe -funktion avulla. Kaavamaisesti se näyttää seuraavalta:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operaatio1)
    .pipe(operaatio2)
    .pipe(operaatio3)
}

Viimeinen pipe -kutsu ketjussa päättyy dest -funktioon, joka määrittää kansion, johon suoritettujen operaatioiden tulos lähetetään:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operaatio1)
    .pipe(operaatio2)
    .pipe(operaatio3)
    .pipe(dest('dist')); // lähetetään dist-kansioon
}

Jokainen operaatio suorittaa jonkin manipulaation tiedostollamme. Esimerkiksi voidaan ensin muuntaa LESS CSS:ksi, sitten lisätä etuliitteet CSS-ominaisuuksiin, sitten minimoida saatua CSS:ää jne.

Jokaista operaatiota varten on oma npm -liitännäinen Gulpille. Liitännäiset on asennettava ja liitettävä tiedostoomme. Opiskelemme erilaisia liitännäisiä seuraavissa oppitunneissa.

Lämmittelynä otetaan tiedostomme ja lähetetään sen kopio kansioon dist, ikään kuin olisimme suorittaneet siihen joitain operaatioita:

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

Tiedostopolkujen taulukko

src -funktio voi parametrina vastaanottaa useamman kuin yhden tiedoston, heti useita taulukkona:

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}