Práce se soubory v Gulp

Gulp umožňuje vzít skupinu souborů, provést s touto skupinou určitou operaci a poté změněné soubory umístit na novou adresu.

K tomu jsou určeny speciální funkce src a dest. Nejprve je importujme z naší knihovny:

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

Funkce src umožňuje získat zadaný soubor:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return místo volání cb
}

S tímto souborem lze poté řetězcem provádět různé operace pomocí funkce pipe. Schematicky to vypadá následovně:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operace1)
    .pipe(operace2)
    .pipe(operace3)
}

Poslední volání pipe v řetězci končí funkcí dest, která určuje složku, do které bude výsledek provedených operací odeslán:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operace1)
    .pipe(operace2)
    .pipe(operace3)
    .pipe(dest('dist')); // odešleme do složky dist
}

Každá operace provádí určitou manipulaci s naším souborem. Například lze nejprve převést LESS na CSS, poté přidat prefixy k vlastnostem CSS, poté minimalizovat získané CSS a tak dále.

Pro každou operaci je určen vlastní npm zásuvný modul pro Gulp. Zásuvné moduly je třeba instalovat a připojovat k našemu souboru. Studiem různých zásuvných modulů se budeme zabývat v následujících lekcích.

Prozatím pro rozcvičení vezměme náš soubor a pošleme jeho kopii do složky dist, jako bychom s ním provedli nějaké operace:

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

Pole cest k souborům

Funkce src může jako parametr přijímat ne jeden soubor, ale několik najednou ve formě pole:

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