Darbas su failais Gulp

Gulp leidžia paimti failų grupę, atlikti su šia grupe tam tikrą operaciją, o tada pakeistus failus patalpinti nauju adresu.

Tam yra skirtos specialios funkcijos src ir dest. Pirmiausia importuokime jas iš mūsų bibliotekos:

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

Funkcija src leidžia gauti nurodytą failą:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return užuot iškvietus cb
}

Su šiuo failu tada grandinėle galima atlikti įvairias operacijas naudojant funkciją pipe. Schematiškai tai atrodo taip:

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

Paskutinis pipe kvietimas grandinėje baigiasi funkcija dest, nurodančia aplanką, į kurį bus siunčiamas atliktų operacijų rezultatas:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operacija1)
    .pipe(operacija2)
    .pipe(operacija3)
    .pipe(dest('dist')); // nusiųsime į dist aplanką
}

Kiekviena operacija atlieka tam tikrą manipuliaciją su mūsų failu. Pavyzdžiui, pirmiausia galima paversti LESS į CSS, tada pridėti priešdėlius prie CSS savybių, tada sumažinti gautą CSS ir taip toliau.

Kiekvienai operacijai yra skirtas savas npm įskiepis Gulp. Įskiepius reikia įdiegti ir prijungti prie mūsų failo. Įvairių įskiepių tyrimu užsiimsime kitose pamokose.

Kol kas, apšilimui, paimkime mūsų failą ir nusiųskime jo kopiją į dist aplanką, tarsi būtume atlikę tam tikras operacijas:

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

Failų kelių masyvas

Funkcija src parametru gali priimti ne vieną failą, o iš karto kelis masyvo pavidalu:

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