Gulp kezdőknek

A Gulp egy olyan eszköz, amely számos feladatban segít, ha webfejlesztésről van szó. Gyakran használják front end feladatok elvégzésére, mint például:

• A webszerver felpörgetése
• A böngésző automatikus újratöltése, amikor egy fájlt mentünk
• A preprocesszorok, például a Sass vagy a LESS használata
• A CSS-hez, JavaScripthez és képekhez hasonló eszközök optimalizálása

Fontos megjegyzés! Ez a cikk a Gulp 3.x-hez íródott, de már megjelent és ajánlott a Gulp 4.x. Mint minden nagyobb verzióváltásnál, az API-knál is vannak törő változások. Ha telepíted a Gulp 4-et, és megpróbálsz néhány dolgot megcsinálni ebben a cikkben, akkor azok nem fognak működni. Erről itt megszórva teszünk néhány megjegyzést, hogy emlékeztessünk rá. Ez úgy néz ki, mint egy elég jó Gulp 4 indító.

Ez nem egy átfogó lista azokról a dolgokról, amiket a Gulp tud. Ha elég őrült vagy, akár statikus oldalgenerátort is készíthetsz a Gulp segítségével (én már megtettem!). Tehát igen, a Gulp rendkívül erős, de meg kell tanulnod használni a Gulp-ot, ha saját testreszabott build folyamatokat akarsz létrehozni.

Ezért van ez a cikk. Segít abban, hogy olyan jól elsajátítsd a Gulp alapjait, hogy minden mást is elkezdhess magadnak felfedezni.

Mielőtt belemerülnénk a Gulp-pal való munkába, beszéljünk arról, hogy miért érdemes a Gulp-ot használni más hasonló eszközökkel szemben.

Miért a Gulp?

A Gulp-hoz hasonló eszközöket gyakran nevezik “építőeszközöknek”, mivel ezek olyan eszközök, amelyek egy weboldal építéséhez szükséges feladatok futtatására szolgálnak. A két legnépszerűbb build tool jelenleg a Gulp és a Grunt. (Chrisnek van egy bejegyzése a Grunt használatának megkezdéséről itt). De természetesen vannak mások is. A Broccoli az eszközök összeállítására összpontosít, ami az egyik leggyakoribb build tool feladat.

Már több cikk is foglalkozik a Grunt és a Gulp közötti különbséggel, és azzal, hogy miért érdemes az egyiket használni a másik helyett. Megnézheted ezt a cikket, ezt vagy ezt, ha többet szeretnél megtudni. A Brunch hasonlóan az eszközökre összpontosít, és a leggyakoribb egyéb feladatokat, például a kiszolgálót és a fájlfigyelőt is összecsomagolja.

A fő különbség az, hogy hogyan konfigurálsz velük egy munkafolyamatot. A Gulp konfigurációk általában sokkal rövidebbek és egyszerűbbek a Grunthoz képest. A Gulp is hajlamos gyorsabban futni.

Lépjünk most tovább, és nézzük meg, hogyan állíthatunk be egy munkafolyamatot a Gulp segítségével.

Amit beállítunk

A cikk végére lesz egy munkafolyamatod, amely elvégzi a cikk elején felvázolt feladatokat:

• Megindítja a webkiszolgálót
• A Sass-t CSS-be fordítja
• A böngészőt automatikusan frissíti, amikor egy fájlt mentesz
• Optimalizálja az összes eszközt (CSS, JS, betűtípusok és képek) a termeléshez

Azt is megtanulod, hogyan lehet a különböző feladatokat egyszerű, könnyen érthető és végrehajtható parancsokká láncolni.

Kezdjük a Gulp telepítésével a számítógépedre.

A Gulp telepítése

A Gulp telepítése előtt telepítened kell a Node.js-t (Node) a számítógépedre.

Ha még nincs telepítve a Node, akkor a csomag telepítőjének letöltésével szerezheti be a Node weboldaláról.

Ha végzett a Node telepítésével, a parancssorban a következő paranccsal telepítheti a Gulp-ot:

$ sudo npm install gulp -g

Megjegyzés: Csak a Mac felhasználóknak van szükségük a sudo kulcsszóra. (Lásd Pawel Grzybek első hozzászólását, ha nem akarod használni a sudo-t). És ne feledd, hogy a fenti kódban a “$” csak a parancssort szimbolizálja. Ez valójában nem része a futtatott parancsnak.

Az itt használt npm install parancs egy olyan parancs, amely a Node Package Manager (npm) segítségével telepíti a Gulp-ot a számítógépedre.

A -g jelző ebben a parancsban azt mondja az npm-nek, hogy globálisan telepítse a Gulp-ot a számítógépére, ami lehetővé teszi, hogy a gulp parancsot bárhol használhassa a rendszerén.

A Mac felhasználóknak szükségük van az extra sudo kulcsszóra a parancsban, mert a Gulp globális telepítéséhez rendszergazdai jogokra van szükségük.

Most, hogy telepítettük a Gulp-ot, készítsünk egy projektet, amely a Gulp-ot használja.

Gulp projekt létrehozása

Először is hozzunk létre egy project nevű mappát, amely a projektünk gyökereként szolgál majd a bemutató során. Ebben a könyvtárban futtassuk a npm init parancsot:

# ... from within our project folder$ npm init

A npm init parancs létrehoz egy package.json fájlt a projektünkhöz, amely információkat tárol a projektről, például a projektben használt függőségeket (a Gulp egy példa a függőségre).

npm init kérni fogja:

Mihelyt a package.json fájl elkészült, a következő paranccsal telepíthetjük a Gulp-ot a projektbe:

$ npm install gulp --save-dev

Ezúttal a Gulp-ot a project fájlba telepítjük ahelyett, hogy globálisan telepítenénk, ezért van néhány különbség a parancsban.

Láthatjuk, hogy a sudo kulcsszóra nincs szükség, mivel nem globálisan telepítjük a Gulp-ot, így a -g kulcsszóra sincs szükség. Hozzáadtuk a --save-dev-et, ami azt mondja a számítógépnek, hogy a package.json-ben adja hozzá a gulp-t dev függőségként.

Ha a parancs végrehajtása után megnézzük a projekt mappát, látnunk kell, hogy a Gulp létrehozott egy node_modules mappát. A node_modules mappán belül egy gulp mappát is látnia kell.

Majdnem készen állunk arra, hogy elkezdjük a munkát a Gulp-pal. Mielőtt ezt megtennénk, tisztában kell lennünk azzal, hogyan fogjuk használni a Gulp-ot a projekthez, és ennek része a könyvtárszerkezet eldöntése.

Mappaszerkezet meghatározása

A Gulp elég rugalmas ahhoz, hogy bármilyen mappaszerkezettel dolgozhasson. Csak meg kell értened a belső működését, mielőtt a projektedhez igazítanád.

Ezért a cikkért egy általános webalkalmazás struktúráját fogjuk használni:

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

Ebben a struktúrában a app mappát fejlesztési célokra fogjuk használni, míg a dist (mint “disztribúció”) mappában a produktív oldalra optimalizált fájlokat fogjuk tárolni.

Mivel a app mappát fejlesztési célokra használjuk, az összes kódunk a app mappába kerül.

Ezt a mappaszerkezetet kell szem előtt tartanunk, amikor a Gulp konfigurációkon dolgozunk. Most pedig kezdjük az első Gulp feladatunk létrehozásával a gulpfile.js mappában, amely az összes Gulp konfigurációt tárolja.

Az első Gulp feladat megírása

A Gulp használatának első lépése az, hogy require a gulpfile-ban megírjuk.

var gulp = require('gulp');

A require utasítás azt mondja a Node-nak, hogy keressen a node_modules mappában egy gulp nevű csomagot. Ha megtaláltuk a csomagot, a tartalmát hozzárendeljük a gulp változóhoz.

Ezzel a gulp változóval most már elkezdhetünk egy gulp taskot írni. A gulp task alapvető szintaxisa a következő:

gulp.task('task-name', function() { // Stuff here});

task-name a task nevére utal, amit mindig akkor használnánk, amikor egy feladatot szeretnénk futtatni a Gulp-ban. Ugyanezt a feladatot a parancssorban is futtathatjuk a gulp task-name írásmóddal.

A kipróbáláshoz hozzunk létre egy hello feladatot, amelynek a szövege Hello Zell!.

gulp.task('hello', function() { console.log('Hello Zell');});

Ezt a feladatot a parancssorban a gulp hello-vel futtathatjuk.

$ gulp hello

A parancssor egy Hello Zell! feliratú naplót fog visszaadni.

A gulp feladatok általában ennél egy kicsit összetettebbek. Általában két további Gulp metódust tartalmaz, valamint különféle Gulp plugineket.

Íme, így nézhet ki egy valódi feladat:

Amint láthatod, egy valódi feladat két további gulp metódust vesz fel – gulp.src és gulp.dest.

gulp.src megmondja a Gulp tasknak, hogy milyen fájlokat használjon a feladathoz, míg a gulp.dest megmondja a Gulpnak, hogy hova adja ki a fájlokat a feladat befejezése után.

Próbáljunk meg egy valódi feladatot létrehozni, ahol a Sass fájlokat CSS fájlokká fordítjuk.

Előfeldolgozás a Gulp-pal

A Sass fájlokat a Gulp-ban tudjuk CSS-re fordítani a gulp-sass nevű plugin segítségével. A gulp-sass-t a npm install paranccsal telepíthetjük a projektünkbe, ahogy azt a gulp esetében is tettük.

A --save-dev flaget is használni szeretnénk, hogy a package.json-ben a gulp-sass hozzáadódjon a devDependencies-hez.

$ npm install gulp-sass --save-dev

A require gulp-sass-t a node_modules mappából kell require kivennünk, ahogy a gulp esetében is tettük, mielőtt használhatnánk a plugint.

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

A gulp-sass-t a aGulpPlugin() sass()-re cserélésével tudjuk használni. Mivel a feladat célja, hogy a Sass-t CSS-be fordítsa, nevezzük el sass-nek.

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

A sass feladatnak forrásfájlokat és egy célt kell megadnunk, hogy a feladat működjön, ezért hozzunk létre egy styles.scss fájlt a app/scss mappában. Ezt a fájlt hozzáadjuk a sass feladathoz a gulp.src-ban.

Az esetleges styles.css fájlt az `app/css` mappába akarjuk kiadni, ami a destination a gulp.dest számára lenne a destination.

Tesztelni akarjuk, hogy a sass feladat úgy működik-e, ahogy szeretnénk. Ehhez hozzáadhatunk egy Sass függvényt a styles.scss-en belül.

// styles.scss.testing { width: percentage(5/7);}

Ha a parancssorban lefuttatjuk a gulp sass parancsot, akkor most már látnunk kell, hogy egy styles.css fájl jött létre a app/css-ben. Ezen kívül megvan az a kód, ahol a percentage(5/7) ki lett értékelve 71.42857%-ba.

/* styles.css */.testing { width: 71.42857%; }

Így tudjuk, hogy a sass feladat működik!

Néha szükségünk van arra, hogy egyszerre több .scss fájlt tudjunk CSS-be fordítani. Ezt megtehetjük a Node globs segítségével.

Globbing a Node-ban

A globok a fájlok megfelelő mintái, amelyek lehetővé teszik, hogy egynél több fájlt adj hozzá a gulp.src-hoz. Olyan, mint a reguláris kifejezések, de kifejezetten fájlútvonalakra.

Mikor globot használ, a számítógép ellenőrzi a fájlneveket és elérési utakat a megadott mintára. Ha a minta létezik, akkor egy fájlra illeszkedik.

A legtöbb munkafolyamat a Gulp segítségével általában csak 4 különböző globbing mintát igényel:

1. *.scss: A * minta egy joker, amely az aktuális könyvtárban lévő bármely mintával megegyezik. Ebben az esetben a gyökérmappában (project) minden .scss végződésű fájlra illeszkedik.
2. **/*.scss: Ez a * minta szélsőségesebb változata, amely minden .scss végződésű fájlra illeszkedik a gyökérmappában és minden gyermekkönyvtárban.
3. !not-me.scss: A ! jelzi, hogy a Gulp-nak ki kell zárnia a mintát a találatok közül, ami hasznos, ha egy fájlt ki kellene zárni az illeszkedő mintából. Ebben az esetben a not-me.scss lenne kizárva az egyezésből.
4. *.+(scss|sass): A plusz + és a zárójel () lehetővé teszi, hogy a Gulp több mintát is egyezzen, a különböző mintákat a pipe | karakterrel elválasztva. Ebben az esetben a Gulp minden .scss vagy .sass végződésű fájlra illeszkedik a gyökérmappában.

Minden más Sass fájl, amely a app/scss alatt található, automatikusan bekerül a sass feladatba ezzel a módosítással. Ha egy print.scss fájlt adunk hozzá a projekthez, akkor láthatjuk, hogy a print.css a app/css-ben lesz generálva.

Most sikerült az összes Sass fájlt egyetlen paranccsal CSS-fájlokká fordítanunk. A kérdés az, hogy mire jó ez, ha manuálisan kell futtatnunk a gulp sass-t minden alkalommal, amikor CSS-be akarjuk fordítani a Sass-t?

Szerencsére meg tudjuk mondani a Gulp-nak, hogy automatikusan futtassa a sass feladatot, amikor egy fájlt mentünk egy “figyelés” nevű folyamaton keresztül.

Sass fájlok figyelése változásokra

Figyelem! A Gulp Watch volt az egyik dolog, ami sokat változott a 3.x-ről a 4.x-re. Lásd a docs-t.

A Gulp biztosít számunkra egy watch metódust, ami ellenőrzi, hogy egy fájl mentésre került-e már. A watch metódus szintaxisa a következő:

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', ); 

Többször előfordul azonban, hogy egyszerre több fájltípust szeretnénk figyelni. Ehhez több megfigyelési folyamatot csoportosíthatunk egy watch feladatba:

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Ha most lefuttattad a gulp watch parancsot, látni fogod, hogy a Gulp azonnal elkezdi a figyelést.

És hogy automatikusan lefuttatja a sass feladatot, amikor egy .scss fájlt mentesz.

Megyünk egy lépéssel tovább, és a Browser Sync segítségével a Gulp újratölti a böngészőt, valahányszor mentünk egy .scss fájlt.

Élő újratöltés a Browser Sync segítségével

A Browser Sync segít megkönnyíteni a webfejlesztést azzal, hogy felpörget egy webszerver, amely segítségével könnyen elvégezhetjük az élő újratöltést. Más funkciói is vannak, mint például a műveletek szinkronizálása több eszközön keresztül.

Először is telepítenünk kell a Browser Sync-et:

$ npm install browser-sync --save-dev

Észrevehetted, hogy nincs gulp- előtag, amikor telepítjük a Browser Sync-et. Ez azért van, mert a Browser Sync a Gulp-pal működik, így nem kell plugint használnunk.

A Browser Sync használatához a require Browser Sync-et kell használnunk.

var browserSync = require('browser-sync').create();

El kell készítenünk egy browserSync feladatot, hogy a Gulp képes legyen a szervert a Browser Sync segítségével felpörgetni. Mivel szervert futtatunk, meg kell adnunk a Browser Syncnek, hogy hol legyen a szerver gyökere. A mi esetünkben ez az `app` mappa:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

A sass feladatunkat is meg kell változtatnunk kissé, hogy a Browser Sync új CSS stílusokat tudjon injektálni (frissíteni a CSS-t) a böngészőbe, amikor a sass feladatot futtatjuk.

Végeztünk a Browser Sync konfigurálásával. Most a watch és a browserSync feladatokat egyszerre kell futtatnunk, hogy az éles újratöltés megtörténjen.

Kényelmetlen lenne két parancssorablakot megnyitni és külön-külön futtatni a gulp browserSync és a gulp watch feladatot, ezért vegyük rá a Gulp-ot, hogy együtt futtassa őket azzal, hogy megmondjuk a watch feladatnak, hogy a browserSync feladatnak be kell fejeződnie, mielőtt a watch futhat.

Ezt úgy tudjuk megtenni, hogy a watch feladathoz hozzáadunk egy második argumentumot. A szintaxis a következő:

gulp.task('watch', , function (){ // ...})

És ebben az esetben a browserSync feladatot adjuk hozzá.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Meg kell győződnünk arról is, hogy a sass a watch előtt fut, így a CSS már a legfrissebb lesz, amikor a Gulp parancsot futtatjuk.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Most, ha a parancssorban a gulp watch parancsot futtatjuk, a Gulpnak egyszerre kell elindítania a sass és a browserSync feladatokat. Amikor mindkét feladat befejeződik, a watch futni fog.

Ezzel egyidejűleg egy böngészőablak is megjelenne, amely a app/index.html-ra mutat. Ha megváltoztatja a styles.scss fájlt, látni fogja, hogy a böngésző automatikusan újratöltődik.

Még egy dolog van, mielőtt befejezzük ezt az éles újratöltéses részt. Ha már figyelünk az .scss fájlok újratöltésére, miért ne mehetnénk egy lépéssel tovább, és miért ne tölthetnénk újra a böngészőt, ha bármilyen HTML- vagy JavaScript-fájlt mentünk?

Megtehetjük ezt úgy, hogy két további figyelő folyamatot adunk hozzá, és meghívjuk a browserSync.reload függvényt, amikor egy fájl mentésre kerül:

Ezidáig ebben a bemutatóban három dologról gondoskodtunk:

1. Egy webszerver felpörgetése a fejlesztéshez
2. A Sass preprocesszor használata
3. A böngésző betöltése, amikor egy fájlt mentünk

A következő részben foglalkozunk az eszközök optimalizálásával kapcsolatos résszel. A CSS és JavaScript fájlok optimalizálásával kezdjük.

CSS- és JavaScript-fájlok optimalizálása

A fejlesztőknek két feladatot kell elvégezniük, amikor CSS- és JavaScript-fájlokat próbálunk optimalizálni a termeléshez: a kicsinyítést és a konkatenálást.

A fejlesztők egyik problémája a folyamat automatizálásakor az, hogy a szkripteket nehéz a megfelelő sorrendben összekapcsolni.

Tegyük fel, hogy a index.html-ben 3 szkriptcímkét építettünk be.

Ezek a szkriptek két különböző könyvtárban találhatók. Nehéz lesz összefűzni őket a hagyományos pluginekkel, mint például a gulp-concatenate.

Szerencsére van egy hasznos Gulp plugin, a gulp-useref, ami megoldja ezt a problémát.

A gulp-useref tetszőleges számú CSS- és JavaScript-fájlt kapcsol össze egyetlen fájlba úgy, hogy olyan megjegyzést keres, amely “<!-build:”-vel kezdődik és “<!-endbuild->”-val végződik. A szintaxis a következő:

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> lehet js, css vagy remove. A legjobb, ha a type-t annak a fájlnak a típusára állítja be, amelyet össze akar kapcsolni. Ha a type értékét remove-re állítja, a Gulp eltávolítja a teljes építési blokkot anélkül, hogy fájlt generálna.

<path> itt a generált fájl cél elérési útvonalára utal.

A végső JavaScript fájlt a js mappában szeretnénk generálni, mint main.min.js. Ennélfogva a jelölés a következő lenne:

Most konfiguráljuk a gulp-useref bővítményt a gulpfile-ban. Telepítenünk kell a plugint, és megkövetelni a gulpfile-ban.

$ npm install gulp-useref --save-dev

var useref = require('gulp-useref');

A useref feladat beállítása hasonló az eddig elvégzett többi feladathoz. Itt van a kód:

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Ha most ezt a useref feladatot futtatjuk, a Gulp végigfut a 3 szkript tagen, és összefűzi őket dist/js/main.min.js-ba.

A fájl azonban most nincs kicsinyítve. A JavaScript fájlok kicsinyítésében a gulp-uglify plugin segítségével kell segítenünk. Szükségünk van egy második, gulp-if nevű pluginra is, hogy biztosítsuk, hogy csak a JavaScript fájlokat próbáljuk minifikálni.

$ npm install gulp-uglify --save-dev 

A gulpnak mostantól automatikusan minifikálnia kell a `main.min.js` fájlt, amikor a useref feladatot futtatja.

Egy ügyes dolog, amit még fel kell fednem a Gulp-useref-fel kapcsolatban, hogy a “<!-build:” és “<!-endbuild->” szkripteket automatikusan egyetlen JavaScript-fájllá változtatja, amely a `js/main.min.js`-re mutat.

Nagyszerű, nem igaz?

Ezzel a módszerrel bármilyen CSS-fájlt is összefűzhetünk (ha úgy döntöttünk, hogy egynél többet adunk hozzá). Ugyanezt a folyamatot követjük, és hozzáadunk egy build megjegyzést.

Az összefűzött CSS-fájlt is minimalizálhatjuk. Ehhez a gulp-cssnano plugin nevű csomagot kell használnunk, amely segít nekünk a kicsinyítésben.

$ npm install gulp-cssnano

Most egy optimalizált CSS fájlt és egy optimalizált JavaScript fájlt kapnánk minden alkalommal, amikor a useref feladatot futtatjuk.

Lépjünk tovább, és optimalizáljuk a képeket a következőkben.

Képek optimalizálása

Valószínűleg már kitaláltad; a képek optimalizálásához a gulp-imagemin segítségére van szükségünk.

$ npm install gulp-imagemin --save-dev

var imagemin = require('gulp-imagemin');

A gulp-imagemin segítségével minifikálhatjuk a png, jpg, gif és még a svg fájlokat is. Hozzunk létre egy images feladatot ehhez az optimalizálási folyamathoz.

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Mivel a különböző fájltípusok különbözőképpen optimalizálhatók, érdemes opciókat hozzáadni a imagemin-hez, hogy testre szabjuk az egyes fájlok optimalizálásának módját.

Például interlaced GIF-eket hozhat létre, ha a interlaced opciós kulcsot true-re állítja.

Más opciókkal is játszadozhat, ha akar.

A képek optimalizálása azonban egy rendkívül lassú folyamat, amit nem érdemes megismételni, hacsak nem szükséges. Ehhez használhatjuk a gulp-cache plugint.

$ npm install gulp-cache --save-dev

Majdnem készen vagyunk az optimalizálással. Még egy mappát kell áthelyeznünk az `app` könyvtárból a `dist` könyvtárba, a betűtípusok könyvtárába. Ezt most tegyük meg.

Fonts másolása a Dist-be

Mivel a fontfájlok már optimalizálva vannak, nincs több teendőnk. Mindössze annyit kell tennünk, hogy a betűtípusokat átmásoljuk a dist-be.

A fájlokat a Gulp segítségével egyszerűen másolhatjuk a gulp.src és gulp.dest megadásával, mindenféle bővítmény nélkül.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

A Gulp mostantól a gulp fonts futtatásakor a `fonts`-t az `app`-ból a `dist`-be fogja másolni.

A gulpfile-ban most 6 különböző task van, és mindegyiket külön-külön kell meghívni a parancssorral, ami elég nehézkes, ezért szeretnénk mindent egy parancsba kötni.

Mielőtt azonban ezt megtennénk, nézzük meg, hogyan lehet automatikusan megtisztítani a generált fájlokat.

A generált fájlok automatikus kitakarítása

Mivel automatikusan generáljuk a fájlokat, meg akarjuk győződni arról, hogy a már nem használt fájlok nem maradnak sehol a tudtunk nélkül.

Ezt a folyamatot nevezzük tisztításnak (vagy egyszerűbben fogalmazva fájlok törlésének).

A tisztításban a del segítségével kell segítenünk.

npm install del --save-dev

var del = require('del');

A del függvény egy csomóponti gömbökből álló tömböt vesz fel, amely megmondja neki, hogy milyen mappákat kell törölnie.

A Gulp feladattal való beállítása majdnem olyan, mint az első “hello” példánk volt.

gulp.task('clean:dist', function() { return del.sync('dist');})

Most a Gulp a gulp clean:dist futtatásakor a `dist` mappát fogja törölni helyetted.

Megjegyzés: Nem kell aggódnunk a dist/images mappa törlése miatt, mert a gulp-cache már eltárolta a képek gyorsítótárát a helyi rendszerünkön.

A cache-ek törléséhez a helyi rendszerünkről létrehozhatunk egy külön feladatot, amelynek a neve `cache:clear`

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Fú, ez aztán nagy szó. Kombináljuk most össze a feladatainkat!

Gulp feladatok kombinálása

Foglaljuk össze, amit eddig csináltunk. Eddig két különböző Gulp feladatcsoportot hoztunk létre.

Az első készlet egy fejlesztési folyamathoz készült, ahol a Sass-t CSS-be fordítottuk, figyeltük a változásokat, és ennek megfelelően újratöltöttük a böngészőt.

A második készlet egy optimalizálási folyamathoz készült, ahol az összes fájlt elkészítettük a produktív weboldalhoz. Ebben a folyamatban optimalizáltuk az olyan eszközöket, mint a CSS, a JavaScript és a képek, és átmásoltuk a betűtípusokat a app-ból a -be.

Az első feladatsort már egy egyszerű munkafolyamatba csoportosítottuk a gulp watch paranccsal:

gulp.task('watch', , function (){ // ... watchers})

A második csoport azokat a feladatokat tartalmazza, amelyeket a termelési weboldal létrehozásához kell lefuttatnunk. Ide tartoznak a clean:dist, sass, useref, images és fonts feladatok.

Ha ugyanezt a gondolatmenetet követnénk, létrehozhatnánk egy build feladatot, hogy mindent egyesítsünk.

gulp.task('build', , function (){ console.log('Building files');})

A build feladatot sajnos nem tudnánk így megírni, mert a Gulp a második argumentumban szereplő összes feladatot egyszerre aktiválja.

Elképzelhető, hogy a useref, images vagy akár a fonts előbb befejeződik, mint a clean, ami azt jelenti, hogy a teljes `dist` mappa törlődik.

Azért, hogy biztosítsuk, hogy a tisztítások a többi feladat előtt befejeződjenek, használnunk kell egy extra bővítményt, a Run Sequence-t.

$ npm install run-sequence --save-dev

Itt van a feladat szekvencia szintaxisa a run sequence-vel:

Az task-name meghívásakor a Gulp először a task-one-ot fogja lefuttatni. Amikor a task-one befejeződik, a Gulp automatikusan elindítja a task-two-et. Végül, amikor a task-two befejeződött, a Gulp lefuttatja a task-three-et. A

Futtatási sorrend lehetővé teszi a feladatok egyidejű futtatását is, ha azokat egy tömbben helyezi el:

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

Ebben az esetben a Gulp először a task-one-ot futtatja. Amikor a task-one befejeződik, a Gulp a második argumentumban szereplő összes feladatot egyszerre futtatja. A második argumentumban lévő összes feladatnak be kell fejeződnie, mielőtt a task-three lefutna.

Ezzel most létrehozhatunk egy olyan feladatot, amely biztosítja, hogy először a clean:dist fut le, majd az összes többi feladat:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Azért, hogy a dolgok konzisztensek legyenek, ugyanezt a szekvenciát az első csoporttal is felépíthetjük. Ezúttal használjuk a default feladatnevet:

gulp.task('default', function (callback) { runSequence(, callback )})

Miért default? Mert ha van egy default nevű feladatunk, akkor egyszerűen a gulp parancs beírásával futtathatjuk, amivel megspórolhatunk néhány billentyűleütést.

Végre itt egy github repo az elvégzett munkánkhoz!

Wrapping it up

Végigvettük a Gulp abszolút alapjait, és létrehoztunk egy olyan munkafolyamatot, amely képes a Sass-t CSS-be fordítani, miközben egyszerre figyeli a HTML és JS fájlokat a változásokra. Ezt a feladatot a parancssorban a gulp paranccsal tudjuk futtatni.

Elkészítettünk egy második feladatot is, build, amely létrehoz egy dist mappát a termelési weboldalhoz. A Sass-t CSS-be fordítottuk, optimalizáltuk az összes eszközünket, és a szükséges mappákat átmásoltuk a dist mappába. A feladat futtatásához csak be kell írnunk a parancssorba a gulp build parancsot.

Végül van egy clean feladatunk, amely kitakarítja a létrehozott dist mappából az összes létrehozott kép gyorsítótárat, így eltávolíthatjuk a régi fájlokat, amelyeket véletlenül a dist mappában tartottunk.

Egy olyan robusztus munkafolyamatot hoztunk létre eddig, amely elég alkalmas a legtöbb webfejlesztő számára. A Gulp-ban és a munkafolyamatokban még sok minden van, amit felfedezhetünk, hogy még jobbá tegyük ezt a folyamatot. Íme néhány ötlet:

A fejlesztéshez:

• Az Autoprefixer használata a vendor-mentes CSS kód írásához
• Sourcemaps hozzáadása a könnyebb hibakereséshez
• Sprite-ok létrehozása a sprity-vel
• Csak a megváltozott fájlok fordítása a gulp-changed-vel
• ES6 írása Babel vagy Traceur segítségével
• A Javascript fájlok modulálása a Browserify segítségével, webpack vagy jspm
• HTML modulálása sablonmotorokkal, mint a Handlebars vagy a Swig
• A gulpfile felosztása kisebb fájlokra a require-dir segítségével
• Modernizr szkript automatikus generálása a gulp-modernizr segítségével

Optimalizáláshoz:

• A nem használt CSS eltávolítása az unCSS-szel
• A CSS további optimalizálása a CSSO-val
• Inline CSS generálása a teljesítmény érdekében a Critical segítségével

A fejlesztési vagy optimalizálási folyamatok mellett a gulp-jasmine segítségével JavaScript egységteszteket is írhat, sőt a gulp-rync segítségével automatikusan telepítheti a dist mappát a termelési szerverére.

Amint láthatod, bár az általunk létrehozott munkafolyamat elég sok mindent elvégez, ennél sokkal többet is lehet tenni. A saját igényeidnek megfelelő munkafolyamat létrehozása rendkívül izgalmas és kielégítő lehet, de ha új vagy ebben a témában, akkor sok mindent kell feldolgoznod.

A Gulpban annyi minden van még, amit lehetetlen ebben a blogbejegyzésben, vagy akár egy posztsorozatban is lefedni. Ezért írtam egy könyvet a munkafolyamatok automatizálásáról, és meghívlak, hogy szerezz tíz fejezetet ingyen, ha többet szeretnél megtudni 🙂