Lucrul cu fișiere în Gulp

Gulp permite luarea unui grup de fișiere, efectuarea unei operații cu acest grup, apoi plasarea fișierelor modificate la o nouă adresă.

Pentru aceasta sunt destinate funcțiile speciale src și dest. Să importăm mai întâi din biblioteca noastră:

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

Funcția src permite obținerea fișierului specificat:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return în loc de apelul cb
}

Cu acest fișier apoi în lanț se pot executa diverse operații cu ajutorul funcției pipe. Schematic, arată astfel:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operația1)
    .pipe(operația2)
    .pipe(operația3)
}

Ultimul apel pipe din lanț se termină cu funcția dest, care stabilește directorul în care va fi trimis rezultatul operațiilor efectuate:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operația1)
    .pipe(operația2)
    .pipe(operația3)
    .pipe(dest('dist')); // vom trimite în directorul dist
}

Fiecare operație produce o anumită manipulare a fișierului nostru. De exemplu, se poate transforma mai întâi LESS în CSS, apoi se pot adăuga prefixe la proprietățile CSS, apoi se poate minimiza CSS-ul obținut și așa mai departe.

Pentru fiecare operație este destinat un anumit plugin npm pentru Gulp. Plugin-urile trebuie instalate și conectate la fișierul nostru. Studierea diverselor plugin-uri o vom face în lecțiile următoare.

Momentan, pentru încălzire, să luăm fișierul nostru și să-i trimitem o copie în directorul dist, ca și cum am fi efectuat asupra lui unele operații:

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

Matrice de căi către fișiere

Funcția src poate primi ca parametru nu un singur fișier, ci mai multe deodată sub formă de matrice:

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