Práca so súbormi v Gulp

Gulp umožňuje zobrať skupinu súborov, vykonať s touto skupinou nejakú operáciu a potom upravené súbory umiestniť na novú adresu.

Na to sú určené špeciálne funkcie src a dest. Najprv ich importujme z našej knižnice:

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

Funkcia src umožňuje získať zadaný súbor:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return namiesto volania cb
}

S týmto súborom je možné následne vykonávať rôzne operácie v reťazci pomocou funkcie pipe. Schematicky to vyzerá nasledovne:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operácia1)
    .pipe(operácia2)
    .pipe(operácia3)
}

Posledné volanie pipe v reťazci končí funkciou dest, ktorá určuje priečinok, do ktorého bude odoslaný výsledok vykonaných operácií:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operácia1)
    .pipe(operácia2)
    .pipe(operácia3)
    .pipe(dest('dist')); // pošleme do priečinka dist
}

Každá operácia vykonáva nejakú manipuláciu s naším súborom. Napríklad, najprv je možné transformovať LESS na CSS, potom pridať prefixy k vlastnostiam CSS, potom minimalizovať výsledné CSS a tak ďalej.

Pre každú operáciu je určený vlastný npm plugin pre Gulp. Pluginy je potrebné nainštalovať a pripojiť k nášmu súboru. Štúdiom rôznych pluginov sa budeme zaoberať v nasledujúcich lekciách.

Teraz na rozcvičku zoberme náš súbor a pošlime jeho kópiu do priečinka dist, ako keby sme nad ním vykonali nejaké operácie:

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

Pole ciest k súborom

Funkcia src môže ako parameter prijať nie jeden súbor, ale niekoľko naraz vo forme poľa:

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