Rad sa fajlovima u Gulp

Gulp omogućava da uzmete grupu fajlova, izvršite neku operaciju nad tom grupom, a zatim izmenjene fajlove postavite na novu adresu.

Za to su namenjene specijalne funkcije src i dest. Hajde za početak da ih importujemo iz naše biblioteke:

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

Funkcija src omogućava da dobijete navedeni fajl:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return umesto poziva cb
}

Nad ovim fajlom zatim po lančanom principu možete izvršavati različite operacije pomoću funkcije pipe. Šematski to izgleda na sledeći način:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operacija1)
    .pipe(operacija2)
    .pipe(operacija3)
}

Poslednji poziv pipe u lancu se završava funkcijom dest, koja zadaje folder u koji će otići rezultat izvršenih operacija:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operacija1)
    .pipe(operacija2)
    .pipe(operacija3)
    .pipe(dest('dist')); // pošaljemo u folder dist
}

Svaka operacija vrši određenu manipulaciju našim fajlom. Na primer, možete prvo da transformišete LESS u CSS, zatim da dodate prefikse CSS svojstvima, pa da minifikujete dobijeni CSS i tako dalje.

Za svaku operaciju je namenjen svoj npm plugin za Gulp. Plugine je potrebno instalirati i povezati sa našim fajlom. Proučavanjem različitih pluginova bavićemo se u narednim lekcijama.

Za sada, za zagrevanje, hajde da uzmemo naš fajl i pošaljemo njegovu kopiju u folder dist, kao da smo izvršili neke operacije nad njim:

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

Niz putanja do fajlova

Funkcija src kao parametar može da primi ne jedan fajl, već odmah nekoliko u obliku niza:

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