Gulp pro začátečníky

Gulp je nástroj, který vám pomůže s několika úkoly při vývoji webu. Často se používá k provádění úkolů na front-endu, jako např:

• Spouštění webového serveru
• Automatické načítání prohlížeče při každém uložení souboru
• Používání preprocesorů jako Sass nebo LESS
• Optimalizace prostředků jako CSS, JavaScript a obrázky

Důležitá poznámka! Tento článek byl napsán pro verzi Gulp 3.x, ale nyní vyšla verze Gulp 4.x, která je doporučena. Jako každá významná změna verze, i rozhraní API má zlomové změny. Pokud nainstalujete Gulp 4 a pokusíte se provést některé z věcí uvedených v tomto článku, nebudou fungovat. Uděláme zde několik poznámek, abychom vám to připomněli. Tohle vypadá jako docela dobrý začátek pro Gulp 4.

Nejedná se o vyčerpávající seznam věcí, které Gulp umí. Pokud jste dostatečně blázniví, můžete pomocí Gulpu vytvořit i generátor statických stránek (už jsem to udělal!). Takže ano, Gulp je nesmírně výkonný, ale pokud chcete vytvářet vlastní přizpůsobené procesy sestavování, budete se muset naučit, jak Gulp používat.

Takže právě k tomu slouží tento článek. Pomůže vám zvládnout základy Gulpu natolik dobře, že budete moci začít sami zkoumat vše ostatní.

Než se ponoříme do práce s nástrojem Gulp, řekneme si, proč byste mohli chtít používat Gulp na rozdíl od jiných podobných nástrojů.

Proč Gulp?“

Nástroje jako Gulp se často označují jako „nástroje pro sestavení“, protože jsou to nástroje pro spouštění úloh pro sestavení webové stránky. Dva nejoblíbenější nástroje pro sestavování jsou v současné době Gulp a Grunt. (Chris má příspěvek o tom, jak začít s Gruntem, zde). Existují ale samozřejmě i další. Broccoli se zaměřuje na kompilaci aktiv, což je jedna z nejběžnějších úloh nástroje pro sestavování.

O rozdílech mezi Gruntem a Gulpem a o tom, proč byste mohli použít jeden z nich místo druhého, již vyšlo několik článků. Pokud se chcete dozvědět více, můžete se podívat na tento článek, tento článek nebo tento článek. Brunch je podobný svým zaměřením na aktiva a sdružuje některé nejběžnější další úlohy, jako je server a hlídač souborů.

Hlavní rozdíl je v tom, jak s nimi nakonfigurujete pracovní postup. Konfigurace Gulpu bývají ve srovnání s Gruntem mnohem kratší a jednodušší. Gulp má také tendenci běžet rychleji.

Přejděme nyní dál a zjistěme, jak nastavit pracovní postup pomocí Gulpu.

Co nastavujeme

Na konci tohoto článku budete mít k dispozici pracovní postup, který bude provádět úlohy, jež jsme nastínili na začátku tohoto článku:

• Spouští webový server
• Kompiluje Sass do CSS
• Obnovuje prohlížeč automaticky při každém uložení souboru
• Optimalizuje všechny prostředky (CSS, JS, písma a obrázky) pro produkci

Zjistíte také, jak řetězit různé úlohy do jednoduchých příkazů, které jsou snadno pochopitelné a proveditelné.

Začneme tím, že si do počítače nainstalujeme Gulp.

Instalace Gulpu

Před instalací Gulpu musíte mít v počítači nainstalovaný Node.js (Node).

Pokud ještě nemáte nainstalovaný Node, můžete jej získat stažením instalačního balíčku z webových stránek Node.

Když jste s instalací Node hotovi, můžete Gulp nainstalovat pomocí následujícího příkazu v příkazovém řádku:

$ sudo npm install gulp -g

Poznámka: Klíčové slovo sudo potřebují pouze uživatelé počítačů Mac. (Pokud nechcete používat sudo, viz první komentář Pawla Grzybka). A nezapomeňte, že „$“ ve výše uvedeném kódu pouze symbolizuje příkazový řádek. Ve skutečnosti to není součást příkazu, který spouštíte.

Příkaz npm install, který jsme zde použili, je příkaz, který pomocí Správce balíčků uzlu (npm) nainstaluje Gulp do vašeho počítače.

Příznak -g v tomto příkazu říká npm, aby nainstaloval Gulp globálně do vašeho počítače, což vám umožní použít příkaz gulp kdekoli v systému.

Uživatelé počítačů Mac potřebují v příkazu navíc klíčové slovo sudo, protože ke globální instalaci nástroje Gulp potřebují práva správce.

Teď, když máte nainstalovaný příkaz Gulp, vytvoříme projekt, který bude příkaz Gulp používat.

Vytvoření projektu Gulp

Nejprve vytvoříme složku s názvem project, která bude sloužit serveru jako kořenový adresář našeho projektu při postupu tímto návodem. Uvnitř tohoto adresáře spusťte příkaz npm init:

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

Příkaz npm init vytvoří soubor package.json pro váš projekt, který uchovává informace o projektu, například závislosti použité v projektu (příkladem závislosti je Gulp).

npm init vás vyzve:

Po vytvoření souboru package.json můžeme do projektu nainstalovat Gulp pomocí následujícího příkazu:

$ npm install gulp --save-dev

Tentokrát instalujeme Gulp do project namísto globální instalace, proto jsou v příkazu určité rozdíly.

Uvidíte, že klíčové slovo sudo není nutné, protože neinstalujeme Gulp globálně, takže -g také není nutné. Přidali jsme --save-dev, které počítači říká, aby přidal gulp jako závislost dev v package.json.

Pokud po dokončení příkazu zkontrolujete složku projektu, měli byste vidět, že Gulp vytvořil složku node_modules. V rámci složky node_modules byste také měli vidět složku gulp.

Jsme téměř připraveni začít pracovat se systémem Gulp. Než tak učiníme, musíme si ujasnit, jak budeme Gulp pro projekt používat, a součástí toho je rozhodnutí o struktuře adresářů.

Určení struktury adresářů

Gulp je dostatečně flexibilní, aby mohl pracovat s jakoukoli strukturou adresářů. Budete jen muset pochopit její vnitřní fungování, než ji upravíte pro svůj projekt.

Pro tento článek použijeme strukturu obecné webové aplikace:

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

V této struktuře budeme složku app používat pro účely vývoje, zatímco složka dist (jako „distribuční“) bude obsahovat optimalizované soubory pro produkční web.

Protože složku app používáme pro účely vývoje, veškerý náš kód bude umístěn ve složce app.

Na tuto strukturu složek budeme muset pamatovat, až budeme pracovat na našich konfiguracích Gulp. Nyní začneme vytvořením první úlohy Gulp ve složce gulpfile.js, která uchovává všechny konfigurace Gulp.

Napsání první úlohy Gulp

Prvním krokem k používání nástroje Gulp je jeho requirevložení do souboru gulp.

var gulp = require('gulp');

Příkaz require říká uzlu Node, aby hledal ve složce node_modules balíček s názvem gulp. Jakmile je balíček nalezen, přiřadíme jeho obsah do proměnné gulp.

Můžeme nyní začít psát úlohu gulp s touto proměnnou gulp. Základní syntaxe úlohy gulp je:

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

task-name odkazuje na název úlohy, který by se použil vždy, když byste chtěli spustit úlohu v Gulp. Stejnou úlohu můžete spustit také v příkazovém řádku zápisem gulp task-name.

Abychom si to mohli vyzkoušet, vytvoříme úlohu hello, která bude mít nápis Hello Zell!.

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

Tuto úlohu můžeme spustit pomocí gulp hello v příkazovém řádku.

$ gulp hello

Příkazový řádek vrátí protokol, který říká Hello Zell!.

Úlohy Gulp jsou obvykle o něco složitější. Obvykle obsahuje dvě další metody Gulp a navíc různé zásuvné moduly Gulp.

Takto může vypadat skutečná úloha:

Jak vidíte, skutečná úloha obsahuje dvě další metody Gulp – gulp.src a gulp.dest.

gulp.src říká úloze Gulp, jaké soubory má pro úlohu použít, zatímco gulp.dest říká Gulpu, kam má soubory po dokončení úlohy vypsat.

Zkusíme sestavit skutečnou úlohu, ve které budeme kompilovat soubory Sass do souborů CSS.

Předzpracování pomocí Gulpu

Soubory Sass můžeme v Gulpu zkompilovat do CSS pomocí zásuvného modulu gulp-sass. Gulp-sass můžete do svého projektu nainstalovat pomocí příkazu npm install, stejně jako jsme to udělali u gulp.

Měli bychom také použít příznak --save-dev, abychom zajistili, že se gulp-sass přidá do devDependencies v package.json.

$ npm install gulp-sass --save-dev

Před použitím zásuvného modulu musíme require gulp-sass ze složky node_modules stejně jako v případě gulp.

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

Můžeme použít gulp-sass tak, že nahradíme aGulpPlugin() za sass(). Protože úloha je určena ke kompilaci jazyka Sass do jazyka CSS, pojmenujme ji sass.

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

Aby úloha sass mohla pracovat, musíme jí poskytnout zdrojové soubory a cílové místo, takže vytvořme soubor styles.scss ve složce app/scss. Tento soubor bude přidán do úlohy sass ve složce gulp.src.

Případný soubor styles.css chceme vyvést do složky `app/css`, což bude destination pro gulp.dest.

Budeme chtít otestovat, zda úloha sass funguje tak, jak chceme. Za tímto účelem můžeme přidat funkci Sass v rámci styles.scss.

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

Pokud spustíte gulp sass v příkazovém řádku, měli byste nyní vidět, že v app/css byl vytvořen soubor styles.css. Kromě toho je v něm uveden kód, ve kterém byl percentage(5/7) vyhodnocen do 71.42857%.

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

Takto víme, že úloha sass funguje!

Někdy potřebujeme možnost zkompilovat do CSS více než jeden soubor .scss najednou. Můžeme tak učinit pomocí globů uzlu.

Globy v Node

Globy jsou odpovídající vzory pro soubory, které umožňují přidat více než jeden soubor do gulp.src. Je to něco jako regulární výrazy, ale speciálně pro cesty k souborům.

Při použití globu počítač kontroluje názvy a cesty k souborům podle zadaného vzoru. Pokud vzor existuje, je soubor porovnán.

Většina pracovních postupů se systémem Gulp obvykle vyžaduje pouze 4 různé vzory globbing:

1. *.scss: Vzor * je zástupný znak, který odpovídá jakémukoli vzoru v aktuálním adresáři. V tomto případě odpovídáme všem souborům končícím na .scss v kořenovém adresáři (project).
2. **/*.scss: Jedná se o extrémnější verzi vzoru *, která odpovídá všem souborům končícím na .scss v kořenovém adresáři a všech podřízených adresářích.
3. !not-me.scss: ! označuje, že Gulp má tento vzor vyloučit ze svých shod, což je užitečné, pokud byste potřebovali vyloučit soubor ze shodného vzoru. V tomto případě by byl ze shody vyloučen not-me.scss.
4. *.+(scss|sass): Plus + a závorky () umožňují programu Gulp porovnávat více vzorů, přičemž různé vzory jsou odděleny znakem roury |. V tomto případě bude Gulp porovnávat jakýkoli soubor končící .scss nebo .sass v kořenové složce.

Každý další soubor Sass, který se nachází uvnitř app/scss, by byl s touto změnou automaticky zahrnut do úlohy sass. Pokud do projektu přidáte soubor print.scss, uvidíte, že print.css bude vygenerován v app/css.

Nyní se nám podařilo zkompilovat všechny soubory Sass do souborů CSS pomocí jediného příkazu. Otázkou je, k čemu je to dobré, když musíme příkaz gulp sass spouštět ručně pokaždé, když chceme zkompilovat Sass do CSS?

Naštěstí můžeme programu Gulp říci, aby automaticky spustil úlohu sass vždy, když je soubor uložen, a to prostřednictvím procesu nazvaného „sledování“.

Sledování souborů Sass při změnách

Poznámka! Sledování Gulp bylo jednou z věcí, které se hodně změnily z verze 3.x na 4.x. Viz dokumentaci.

Gulp nám poskytuje metodu watch, která kontroluje, zda byl soubor uložen. Syntaxe metody watch je:

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

Častěji však budeme chtít sledovat více typů souborů najednou. Za tímto účelem můžeme seskupit více procesů sledování do úlohy watch:

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

Pokud jste právě teď spustili příkaz gulp watch, uvidíte, že Gulp začne sledovat okamžitě.

A že automaticky spustí úlohu sass, kdykoli uložíte soubor .scss.

Půjdeme ještě o krok dál a přimějeme Gulp, aby znovu načítal prohlížeč, kdykoli uložíme soubor .scss, pomocí funkce Browser Sync.

Živé načítání s Browser Sync

Browser Sync pomáhá usnadnit vývoj webu tím, že roztočí webový server, který nám pomůže snadno provádět živé načítání. Má i další funkce, například synchronizaci akcí na více zařízeních.

Nejprve musíme nainstalovat aplikaci Browser Sync:

$ npm install browser-sync --save-dev

Možná jste si všimli, že při instalaci Browser Sync není uvedena předpona gulp-. Je to proto, že Browser Sync pracuje se systémem Gulp, takže nemusíme používat žádný zásuvný modul.

Chceme-li používat Browser Sync, budeme muset require Browser Sync.

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

Musíme vytvořit úlohu browserSync, která umožní Gulpu roztočit server pomocí Browser Sync. Protože spouštíme server, musíme Browser Sync sdělit, kde má být kořenový adresář serveru. V našem případě je to složka `app`:

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

Musíme také mírně změnit naši úlohu sass, aby Browser Sync mohl injektovat nové styly CSS (aktualizovat CSS) do prohlížeče vždy, když je spuštěna úloha sass.

S konfigurací Browser Sync jsme skončili. Nyní musíme spustit obě úlohy watch a browserSync současně, aby došlo k živému načítání.

Bude těžkopádné otevírat dvě okna příkazového řádku a spouštět gulp browserSync a gulp watch zvlášť, takže přimějeme Gulp, aby je spustil společně tím, že úloze watch řekneme, že browserSync musí být dokončena dříve, než bude povoleno spuštění úlohy watch.

To můžeme udělat tak, že do úlohy watch přidáme druhý argument. Syntaxe je následující:

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

A v tomto případě přidáváme úlohu browserSync.

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

Budeme se také chtít ujistit, že sass se spustí před watch, takže CSS již bude nejnovější, kdykoli spustíme příkaz Gulp.

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

Pokud nyní v příkazovém řádku spustíme gulp watch, měl by Gulp spustit úlohy sass i browserSync současně. Po dokončení obou úloh se spustí watch.

Současně by se také zobrazilo okno prohlížeče, které ukazuje na app/index.html. Pokud změníte soubor styles.scss, uvidíte, že se prohlížeč automaticky znovu načte.

Než ukončíme tuto část o živém načítání, je tu ještě jedna věc. Když už sledujeme, zda se načítají soubory .scss, proč nejít ještě o krok dál a nenačítat prohlížeč znovu, pokud se uloží nějaký soubor HTML nebo JavaScript?

Můžeme to udělat tak, že přidáme další dva procesy sledování a zavoláme funkci browserSync.reload, když se nějaký soubor uloží:

V tomto návodu jsme se zatím postarali o tři věci:

1. Zprovoznění webového serveru pro vývoj
2. Použití preprocesoru Sass
3. Přepnutí prohlížeče při každém uložení souboru

V příští části se budeme věnovat optimalizaci prostředků. Začneme optimalizací souborů CSS a JavaScript.

Optimalizace souborů CSS a JavaScript

Vývojáři mají dva úkoly, které musíme provést, když se snažíme optimalizovat soubory CSS a JavaScript pro produkci: miniaturizaci a konkatenaci.

Jedním z problémů, se kterým se vývojáři při automatizaci tohoto procesu potýkají, je obtížné spojit skripty ve správném pořadí.

Řekněme, že jsme do index.htmlzařadili 3 značky skriptů.

Tyto skripty se nacházejí ve dvou různých adresářích. Bude obtížné je spojit pomocí tradičních zásuvných modulů, jako je gulp-concatenate.

Naštěstí existuje užitečný zásuvný modul Gulp, gulp-useref, který tento problém řeší.

Gulp-useref spojí libovolný počet souborů CSS a JavaScript do jednoho souboru tak, že vyhledá komentář, který začíná „<!-build:“ a končí „<!-endbuild->“. Jeho syntaxe je:

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

<type> může být buď js, css nebo remove. Nejlepší je nastavit type na typ souboru, který se snažíte spojit. Pokud nastavíte type na remove, Gulp odstraní celý blok sestavení bez vygenerování souboru.

<path> zde odkazuje na cílovou cestu generovaného souboru.

Budeme chtít, aby byl výsledný soubor JavaScriptu vygenerován ve složce js jako main.min.js. Značení by tedy bylo následující:

Nyní nakonfigurujeme zásuvný modul gulp-useref v souboru gulp. Zásuvný modul budeme muset nainstalovat a vyžadovat v souboru gulpfile.

$ npm install gulp-useref --save-dev

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

Nastavení úlohy useref je podobné jako u ostatních úloh, které jsme dosud prováděli. Zde je kód:

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

Pokud nyní spustíte tuto úlohu useref, Gulp projde 3 značky skriptu a spojí je do dist/js/main.min.js.

Soubor však nyní není minifikován. Budeme muset použít zásuvný modul gulp-uglify, který nám pomůže s minifikací souborů JavaScript. Potřebujeme také druhý zásuvný modul s názvem gulp-if, který zajistí, že se pokusíme minifikovat pouze soubory JavaScript.

$ npm install gulp-uglify --save-dev 

Gulp by nyní měl automaticky minifikovat soubor `main.min.js` při každém spuštění úlohy useref.

Jednou šikovnou věcí, kterou jsem ještě odhalil pomocí Gulp-useref, je to, že automaticky změní všechny skripty v rámci „<!-build:“ a „<!-endbuild->“ na jeden jediný soubor JavaScriptu, který ukazuje na `js/main.min.js`.

Nádhera, že?

Stejnou metodu můžeme použít i ke spojení libovolných souborů CSS (pokud jste se rozhodli přidat více než jeden). Budeme postupovat stejně a přidáme komentář build.

Spojený soubor CSS můžeme také minifikovat. Musíme použít balíček nazvaný zásuvný modul gulp-cssnano, který nám s minifikací pomůže.

$ npm install gulp-cssnano

Nyní byste při každém spuštění úlohy useref získali jeden optimalizovaný soubor CSS a jeden optimalizovaný soubor JavaScript.

Přejděme k dalšímu kroku a optimalizujme obrázky.

Optimalizace obrázků

Už jste to asi uhodli; s optimalizací obrázků nám pomůže nástroj gulp-imagemin.

$ npm install gulp-imagemin --save-dev

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

Pomocí nástroje gulp-imagemin můžeme minifikovat png, jpg, gif a dokonce i svg. Vytvořme pro tento proces optimalizace úlohu images.

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

Protože různé typy souborů mohou být optimalizovány různě, možná budete chtít přidat možnosti do imagemin, abyste mohli přizpůsobit způsob optimalizace jednotlivých souborů.

Například prokládané soubory GIF můžete vytvořit nastavením klíče voleb interlaced na hodnotu true.

Pokud chcete, můžete si pohrát i s dalšími možnostmi.

Optimalizace obrázků je však extrémně pomalý proces, který byste nechtěli opakovat, pokud to není nutné. K tomu můžeme použít zásuvný modul gulp-cache.

$ npm install gulp-cache --save-dev

S optimalizací jsme téměř hotovi. Zbývá nám ještě jedna složka, kterou musíme přenést z adresáře `app` do adresáře `dist`, tedy do adresáře s písmy. Udělejme to nyní.

Kopírování písem do adresáře Dist

Protože jsou soubory s písmy již optimalizovány, nemusíme dělat nic dalšího. Jediné, co musíme udělat, je zkopírovat písma do adresáře dist.

Soubory můžeme pomocí Gulpu kopírovat jednoduše tak, že zadáme gulp.src a gulp.dest bez jakýchkoli zásuvných modulů.

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

Nyní bude Gulp kopírovat `fonty` z `app` do `dist`, kdykoli spustíte gulp fonts.

V souboru gulp máme nyní 6 různých úloh a každou z nich musíme volat jednotlivě pomocí příkazového řádku, což je poněkud těžkopádné, takže chceme vše spojit do jednoho příkazu.

Než to však uděláme, podíváme se na to, jak vygenerované soubory automaticky vyčistit.

Automatické čištění vygenerovaných souborů

Protože generujeme soubory automaticky, budeme chtít zajistit, aby soubory, které se již nepoužívají, nezůstaly nikde bez našeho vědomí.

Tento proces se nazývá čištění (nebo jednodušeji řečeno mazání souborů).

S úklidem nám pomůže příkaz del.

npm install del --save-dev

var del = require('del');

Funkce del přijímá pole uzlových globů, které jí říká, které složky má smazat.

Nastavení pomocí úlohy Gulp je téměř stejné jako první příklad „ahoj“, který jsme měli.

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

Nyní bude Gulp mazat složku `dist` za vás, kdykoli se spustí gulp clean:dist.

Poznámka: O smazání složky dist/images se nemusíme starat, protože gulp-cache již uložila mezipaměť obrázků do vašeho lokálního systému.

Chcete-li vymazat mezipaměti z místního systému, můžete vytvořit samostatnou úlohu, která se bude jmenovat `cache:clear`

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

Uf, to je ale sousto. Pojďme teď spojit všechny naše úlohy dohromady!

Spojení úloh Gulp

Shrňme si, co jsme udělali. Zatím jsme vytvořili dvě různé sady úloh Gulp.

První sada je určena pro vývojový proces, kdy jsme kompilovali Sass do CSS, sledovali změny a podle toho znovu načítali prohlížeč.

Druhá sada je určena pro optimalizační proces, kdy jsme připravili všechny soubory pro produkční web. V tomto procesu jsme optimalizovali aktiva jako CSS, JavaScript a obrázky a zkopírovali jsme písma z app do dist.

První sadu úloh jsme již seskupili do jednoduchého pracovního postupu pomocí příkazu gulp watch:

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

Druhou sadu tvoří úlohy, které musíme spustit pro vytvoření produkčního webu. Patří sem úlohy clean:dist, sass, useref, images a fonts.

Pokud bychom šli stejným myšlenkovým pochodem, mohli bychom vytvořit úlohu build, která by vše spojila dohromady.

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

Naneštěstí bychom takto nemohli napsat úlohu build, protože Gulp aktivuje všechny úlohy v druhém argumentu současně.

Existuje možnost, že useref, images nebo dokonce fonts se dokončí dříve než clean, což znamená, že se smaže celá složka `dist`.

Abychom tedy zajistili, že se čištění dokončí dříve než ostatní úlohy, musíme použít další doplněk nazvaný Run Sequence.

$ npm install run-sequence --save-dev

Tady je syntaxe sekvence úloh s run sequence:

Pokud se zavolá task-name, Gulp nejprve spustí task-one. Jakmile task-one skončí, Gulp automaticky spustí task-two. Nakonec po dokončení task-two spustí Gulp task-three.

Sekvence spouštění také umožňuje spouštět úlohy současně, pokud je umístíte do pole:

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

V tomto případě Gulp nejprve spustí task-one. Po dokončení task-one spustí Gulp všechny úlohy v druhém argumentu současně. Všechny úlohy v tomto druhém argumentu musí být dokončeny před spuštěním úlohy task-three.

Můžeme tedy nyní vytvořit úlohu, která zajistí, že se nejprve spustí úloha clean:dist a po ní všechny ostatní úlohy:

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

Aby byla situace konzistentní, můžeme stejnou posloupnost sestavit i s první skupinou. Tentokrát použijeme jako název úlohy default:

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

Proč default? Protože když máte úlohu pojmenovanou default, můžete ji spustit jednoduše zadáním příkazu gulp, čímž ušetříte několik stisků kláves.

Nakonec tu máme repozitář githubu pro celou naši práci!

Závěr

Prošli jsme naprostými základy příkazu Gulp a vytvořili pracovní postup, který dokáže kompilovat Sass do CSS a zároveň sledovat, zda nedošlo ke změnám v souborech HTML a JS. Tuto úlohu můžeme spustit pomocí příkazu gulp v příkazovém řádku.

Vytvořili jsme také druhou úlohu build, která vytvoří složku dist pro produkční web. Zkompilovali jsme Sass do CSS, optimalizovali všechny naše prostředky a zkopírovali potřebné složky do složky dist. Pro spuštění této úlohy stačí do příkazového řádku zadat gulp build.

Nakonec máme úlohu clean, která z vytvořené složky dist vymaže všechny vytvořené mezipaměti obrázků, což nám umožní odstranit všechny staré soubory, které byly nedopatřením uchovávány ve složce dist.

Zatím jsme vytvořili robustní pracovní postup, který je dostatečně schopný pro většinu webových vývojářů. V systému Gulp a pracovních postupech je toho mnohem více, co můžeme prozkoumat, abychom tento proces ještě vylepšili. Zde je několik nápadů pro vás:

Pro vývoj:

• Použití Autoprefixeru k psaní kódu CSS bez vendorů
• Přidání zdrojových map pro snadnější ladění
• Vytváření spritů pomocí sprity
• Kompilování pouze souborů, které se změnily, pomocí gulp-changed
• Psaní ES6 pomocí Babel nebo Traceur
• Modularizace souborů Javascript pomocí Browserify, webpack nebo jspm
• Modularizace HTML pomocí šablonovacích strojů jako Handlebars nebo Swig
• Rozdělení souboru gulp na menší soubory pomocí require-dir
• Automatické generování skriptu Modernizr pomocí gulp-modernizr

Pro optimalizaci:

• Odstranění nepoužívaného CSS pomocí unCSS
• Další optimalizace CSS pomocí CSSO
• Generování inline CSS pro výkon pomocí Critical

Kromě vývojových nebo optimalizačních procesů můžete také přidat zápis unit testů JavaScriptu pomocí gulp-jasmine a dokonce i automatické nasazení složky dist na produkční server pomocí gulp-rync.

Jak vidíte, i když námi vytvořený pracovní postup dělá poměrně dost věcí, lze toho udělat mnohem více. Vytvoření pracovního postupu, který vyhovuje vašim potřebám, může být nesmírně vzrušující a naplňující, ale pokud s tím začínáte, může toho být hodně.

V systému Gulp je toho tolik, že to není možné obsáhnout v rámci tohoto příspěvku na blogu, nebo dokonce série příspěvků. Proto jsem napsal knihu o automatizaci pracovních postupů, a pokud máte zájem dozvědět se víc, zvu vás, abyste si vzali deset kapitol zdarma 🙂