Delo z datotekami v Gulp

Gulp omogoča jemanje skupine datotek, izvajanje določene operacije s to skupino in nato postavitev spremenjenih datotek na nov naslov.

Za to so namenjene posebne funkcije src in dest. Najprej jih uvozimo iz naše knjižnice:

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

Funkcija src omogoča pridobitev navedene datoteke:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return namesto klica cb
}

S to datoteko lahko nato v verizi izvajamo različne operacije s funkcijo pipe. Shematično je to prikazano na naslednji način:

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

Zadnji klic pipe v verigi se konča s funkcijo dest, ki določa mapo, v katero bo poslan rezultat izvedenih operacij:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operacija1)
    .pipe(operacija2)
    .pipe(operacija3)
    .pipe(dest('dist')); // pošljemo v mapo dist
}

Vsaka operacija izvede določeno manipulacijo z našo datoteko. Na primer, najprej lahko pretvorimo LESS v CSS, nato dodamo predpone lastnostim CSS, nato minimiziramo dobljeni CSS in tako naprej.

Za vsako operacijo je namenjen svoj npm vtičnik za Gulp. Vtičnike je treba namestiti in povezati z našo datoteko. Preučevanje različnih vtičnikov bomo obravnavali v naslednjih lekcijah.

Za začetek vzemimo našo datoteko in pošljimo njeno kopijo v mapo dist, kot da bi izvedli nekaj operacij nad njo:

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

Matrika poti do datotek

Funkcija src lahko kot parameter sprejme ne eno datoteko, ampak več naenkrat v obliki matrike:

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