Začínáme s Gulp.js

Gulp je nástroj založený na Javascriptu, který umožňuje automatizovat bity vašeho pracovního postupu. Automatizace vám doslova ušetří hodiny denně. Ať už jste vývojář nebo designér, který nyní vytváří drátové modely ve formátu HTML, doporučuji vám, abyste se do nich dostali.

V tomto článku se podíváme na základy používání Gulp - od instalace po základní syntaxi a několik příkladů. Na konci článku byste měli být schopni najít, nainstalovat a používat balíčky, které ostatní vytvořili pro Gulp kompilovat SASS, optimalizovat obrázky, vytvářet skřítky, spojovat soubory a další!

Instalace Gulp

Nebojte se, instalace je velmi snadná. Bude třeba použít terminál v OSX a Linuxu nebo příkazový řádek pro Windows. Od teď budu na to odkazovat jako na Terminál.

Otevřete ho a zadejte npm -v a stiskněte klávesu enter. Pokud je zobrazeno číslo verze, máte již nainstalovaný uzel - to je závislost na Gulp.

Pokud dostanete “příkaz nenalezen” (nebo podobná chyba), přejděte dolů na stránku stahování Node.js a vyberte příslušný balíček pro váš systém. Po instalaci bude v terminálu k dispozici příkaz npm.

Instalace Gulp je stejně jednoduchá. Do terminálu vložte následující příkaz:

npm install --global gulp

Tím se nainstaluje příkaz Gulp, který bude ve vašem systému dostupný globálně.

Přidání projektu Gulp do projektu

Gulp je nyní nainstalován, ale budeme ho muset přidat do každého projektu, který potřebujeme, zvlášť. Vytvořte nyní prázdnou složku a přejděte do ní ve svém terminálu. Ve složce projektu použijte následující příkaz:

npm install --save-dev gulp

To by mělo vytvořit složku node_modules a soubor npm-debug.log ve složce projektu. Ty jsou používány Gulp k tomu, aby svou věc, aby váš projekt, nemusíte přemýšlet o nich v této fázi.

Důvod, proč musíme přidat Gulp ke každému konkrétnímu projektu, je ten každý projekt má jiné požadavky. Jeden může volat pro SASS, další pro Méně. Jeden může používat Coffeescript, druhý nemusí, a tak dále.

Gulpfile

Gulpfile je místo, kde se stane magie, kde definujete automatizace, které požadujete a když chcete, aby se to stalo. Vytvořme prázdný výchozí úkol vytvořením pojmenovaného souboru gulpfile.js a vložení následujícího kódu do něj.

var gulp = vyžadují ('gulp'); gulp.task ('default', function () // To zatím nic neznamená, přidáme funkčnost brzy);

Jakmile je tento soubor uložen, můžete se vrátit do svého terminálu a spustit příkaz gulp sám. Gulp detekuje, v jakém projektu se nachází, a spouští výchozí úlohu, kterou jsme právě vytvořili. Měli byste vidět něco takového:

Nic se tu opravdu neděje, protože úkol je prázdný, ale funguje to dobře. Pojďme si jít s několika příklady!

Kopírování souboru

Tohle je nudné, přiznám se tolik, ale pomůže vám pochopit, co se děje snadno.

Ve složce projektu vytvořte pojmenovaný soubor to_copy.txt , a pojmenovaná složka dev. Pojďme do našeho souboru Gulpfile a vytvoříme nový úkol s názvem kopírovat.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

První řádek definuje úkol, který je pojmenován kopie. V tomto rámci používáme gulp.src ke specifikaci, které soubory s tímto úkolem cílíme - v tomto případě jde o jeden soubor s názvem to_copy.txt.

Tyto soubory pak napojíme na funkci gulp.dest, která určuje, kam chceme tyto soubory umístit - použil jsem adresář dev.

Vraťte se ke svému terminálu a typu doušek kopie Chcete-li spustit tento úkol, měl by zkopírovat zadaný soubor do zadaného adresáře, například takto:

Příkaz pipe je v srdci Gulp. Je to efektivní způsob přesunu dat mezi příkazy. Příkaz src určuje soubory, které jsou připojeny k příkazu dest. Ve složitějších scénářích bychom před zadáním cíle napojili naše soubory na jiné příkazy.

Měli byste si také uvědomit, že zdroj může být uveden jako jeden soubor nebo více souborů. Pokud máme složku pojmenovanou Výroba a chceme přesunout všechny soubory z našeho rozvoj do ní bychom mohli použít následující příkaz:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Znak hvězdy bude odpovídat cokoli v adresáři. Mohli byste také sladit všechny soubory ve všech podadresářích a provádět všechny druhy dalších efektních přizpůsobení. Pro více informací se podívejte na dokumentaci uzlu-glob.

Kompilace SASS

Kompilace šablony stylů ze souborů SASS je pro vývojáře běžným úkolem. Dá se to udělat s Gulpem docela snadno, budeme muset udělat nějakou přípravu. Kromě základních příkazů, jako je src, dest a řada dalších, je veškerá funkce přidávána pomocí doplňků třetích stran. Zde je návod, jak jdu používat.

píši SASS Gulp do Google, první výsledek je obvykle to, co potřebuji, měli byste najít stránku pro SASS balíček. Ukazuje, jak jej nainstalovat (npm install gulp-sass). Pravděpodobně budete muset použít sudo k instalaci jako administrátor, takže to bude pravděpodobně (sudo npm install gulp-sass) .

Až budete hotovi, můžete použít syntaxi, kterou diktuje balíček, aby se váš kód zkompiloval. Chcete-li to provést, vytvořte soubor s názvem styles.scss s následujícím obsahem:

$ primární: # ff9900; tělo pozadí: $ primární; 

Nyní vytvořte následující úkol Gulp v souboru Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./css')););

Před spuštěním příkazu nezapomeňte tento balíček v horní části souboru Gulpfile „vyžadovat“ takto:

var sass = vyžadují ('gulp-sass');

Když běžíš doušek sass, všechny soubory s příponou scss budou připojeny k funkci sass, která je převede na css. Ty jsou pak připojeny k cílové funkci, která je umístí do složky css.

Sledování souborů a složek

Zatím je to po ruce, ale stále musíme zadat příkaz pokaždé Chceme spouštět úkol, který není příliš efektivní, zejména pokud jde o změny stylů. Gulp umožňuje automaticky sledovat soubory pro změny a spouštět příkazy.

V souboru Gulpfile vytvořte pojmenovaný příkaz automatizovat který bude používat příkaz watch pro sledování sady souborů pro změny a při změně souboru spouští specifický příkaz.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Pokud píšete gulp automatizovat do terminálu se spustí a dokončí úlohu, ale k výzvě se nevrátí, protože se jedná o monitorování změn. Zadali jsme, že chceme sledovat všechny soubory scss v kořenovém adresáři a pokud se změní, chceme spustit příkaz sass, který jsme nastavili dříve..

Pokud nyní změníte soubor style.scss, měl by být automaticky zkompilován do souboru css v adresáři css.

Spuštění více úkolů

Existuje mnoho situací, kdy budete chtít spustit více úloh. Při sledování vaší složky JavaScriptu budete chtít zkompilovat dva soubory a poté je zkopírovat. Existují dva způsoby, jak toho dosáhnout.

Pokud se jedná o úkoly, rád bych řetězu. Dobrým příkladem by bylo zřetězení a minifikace souborů javascript. Nejprve vložíme naše soubory do akce concat, pak je napojíme na gulp-uglify a pak použijeme cílovou funkci pro jejich výstup..

Pokud jsou úkoly nesouvisející, můžete volání více úkolů. Příkladem by byl úkol, kdy bychom chtěli spojit a minifikovat naše skripty a také kompilovat naše SASS. Tady je plný Gulpfile, jak by to vypadalo.

var gulp = vyžadují ('gulp'); var uglify = vyžadují ('gulp-uglify'); var concat = vyžadují ('gulp-concat'); var sass = vyžadují ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['skripty', 'styly']);); gulp.task ('výchozí', ['skripty', 'styly']);

Pokud píšete gulp skripty do terminálu budou propojeny všechny soubory javascriptu v adresáři js, výstup do hlavního adresáře, pak uglified a uloženy do hlavního adresáře.

Pokud píšete doušek sass, všechny vaše soubory scss budou zkompilovány a uloženy do adresáře css.

Pokud píšete doušek (výchozí úloha) skripty bude spuštěn, následovaný vaším styly úkol.

gulp automatizovat úkol sleduje více složek pro změny v našich souborech scss a js a provede obě úlohy, které jsme definovali, pokud je zjištěna změna.

Přehled

Použití Gulp není obtížné, ve skutečnosti mnoho lidí dává přednost tomu, aby ho Grunt kvůli jeho jednodušší syntaxi preferoval. Zapamatujte si kroky, které je třeba učinit při vytváření nové automatizace:

• Hledat plugin
• Nainstalujte plugin
• Vyžadovat plugin ve vašem souboru Gulpfile
• Použijte syntaxi v dokumentaci

Pět příkazů dostupných v Gulpu (úkol, běh, hodinky, src, dest) jsou jediné, které potřebujete vědět, všechny addony třetích stran mají skvělou dokumentaci. Zde je seznam některých věcí, které používám a které můžete začít hned teď:

• Optimalizace obrázků pomocí optimalizace obrazu gulp-image
• Vytváření obrazových skřítků pomocí gulp-sprite
• Spojení souborů s gulp-concat
• Minifikování souborů pomocí gulp-uglify
• Mazání souborů pomocí gulp-del
• Javascript linting s gulp-jslint
• JSON linting s gulp-jsonlint
• Autoprefix CSS s gulp-autoprefixerem
• Vyhledávání a nahrazení pomocí gulp-frep
• Minifikujte CSS pomocí gulp-minify-css