Fájlok kezelése Gulp-ban

A Gulp lehetővé teszi fájlcsoportok felvételét, valamilyen művelet végrehajtását ezen a csoporton, majd a módosított fájlok új helyre történő elhelyezését.

Erre szolgálnak a speciális src és dest függvények. Először is importáljuk őket a könyvtárunkból:

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

A src függvény lehetővé teszi a megadott fájl megszerzését:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return a cb hívás helyett
}

Ezzel a fájllal ezután láncszerűen különböző műveletek végezhetők a pipe függvény segítségével. Sematikusan ez a következőképpen néz ki:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(művelet1)
    .pipe(művelet2)
    .pipe(művelet3)
}

A lánc utolsó pipe hívása a dest függvénnyel zárul, amely megadja azt a mappát, ahová az elvégzett műveletek eredménye kerül:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(művelet1)
    .pipe(művelet2)
    .pipe(művelet3)
    .pipe(dest('dist')); // elküldjük a dist mappába
}

Minden művelet valamilyen manipulációt végez a fájlunkkal. Például először LESS-t alakíthatunk CSS-sé, majd hozzáadhatunk előtagokat a CSS tulajdonságokhoz, ezutan minimalizálhatjuk a kapott CSS-t és így tovább.

Minden művelethez saját npm plugin tartozik a Gulp-hoz. A pluginokat telepíteni kell és csatlakoztatni kell a fájlunkhoz. Különböző pluginok tanulmányozásával a következő leckékben foglalkozunk.

Most bemelegítésként vegyük a fájlunkat és küldjük el egy másolatát a dist mappába, mintha végeztünk volna rajta néhány műveletet:

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

Fájl elérési utak tömbje

A src függvény paraméterként nem csak egy fájlt fogadhat, hanem többet is, tömb formájában:

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