Začíname so službou Gulp.js

Gulp je nástroj založený na Javascripte, ktorý umožňuje automatizovať bity vášho pracovného postupu. Automatizácia vám môže doslova ušetriť hodiny denne. Či už ste vývojár alebo dizajnér, ktorý teraz a teraz vytvára HTML drôtené rámy, odporúčam vám vykopať.

V tomto článku sa pozrieme na základy používania Gulp - od inštalácie po základnú syntax a pár príkladov. Na konci článku by ste mali byť schopní nájsť, inštalovať a používať balíky, ktoré vytvorili ostatní pre spoločnosť Gulp skompilovať SASS, optimalizovať obrázky, vytvárať skryté súbory, zlučovať súbory a ďalšie!

Inštalácia Gulp

Nebojte sa, inštalácia je veľmi jednoduchá. Budeme musieť používať terminál v OSX a Linux, alebo príkazový riadok pre Windows. Budem odteraz hovoriť ako Terminál.

Otvorte ho a zadajte príkaz npm -v a stlačte kláves enter. Ak uvidíte číslo verzie, ktoré už máte nainštalované, je to závislosť pre Gulp.

Ak dostanete “príkaz nenájdený” (alebo podobnú chybu), prejdite nadol na stránku preberania súborov Node.js a vyberte príslušný balík pre váš systém. Po nainštalovaní bude v termináli k dispozícii príkaz npm.

Inštalácia Gulpu je rovnako jednoduché. Vložte do terminálu nasledujúci príkaz:

npm install --global gulp

Tým sa nainštaluje príkaz Gulp, ktorý bude vo vašom systéme k dispozícii na celom svete.

Pridanie gulp k projektu

Gulp je teraz nainštalovaný, ale budeme ju musieť pridať do každého projektu, ktorý potrebujeme, samostatne. Vytvorte teraz prázdnu zložku a prejdite do nej v termináli. Keď ste v priečinku projektu, použite nasledujúci príkaz:

npm nainštalujte --save-dev gulp

Toto by malo vytvoriť priečinok node_modules a súbor npm-debug.log vo vašom priečinku projektu. Používajú ich Gulp, aby urobili svoju vec vo vašom projekte, nemusíte o nich v tejto fáze premýšľať.

Dôvod, prečo musíme pridať Gulp do každého konkrétneho projektu, je to každý projekt má rôzne požiadavky. Možno voláte pre SASS, ďalšie pre Less. Jeden môže použiť Coffeescript, druhý nemusí a tak ďalej.

Gulpfile

Gulpfile je miesto, kde sa deje kúzlo, je to miesto, kde definujete automatizácie, ktoré potrebujete a keď chcete, aby sa to stalo. Vytvoríme prázdnu predvolenú úlohu vytvorením súboru s názvom gulpfile.js a do nej vložiť nasledujúci kód.

var gulp = vyžadujú ("gulp"); gulp.task ('default', funkcia () // Toto zatiaľ nedáva nič, do čoskoro pridáme funkčnosť);

Po uložení tohto súboru sa môžete vrátiť späť na svoj terminál a sám spustiť príkaz gulp. Gulp zisťuje, v ktorom projekte sa nachádza, a spúšťa predvolenú úlohu - práve tu sme vytvorili. Mali by ste vidieť niečo takéto:

Tu sa nič nestane, pretože úloha je prázdna, ale funguje to dobre. Teraz poďme s niektorými vhodnými príkladmi!

Kopírovanie súboru

Toto je nudné, priznávam toľko, ale pomôže vám pochopiť, čo sa deje ľahko.

V priečinku projektu vytvorte súbor s názvom to_copy.txt , a priečinok s názvom dev. Poďme do nášho Gulpfile a vytvoríme novú úlohu s názvom kópie.

gulp.task ('kopírovať', funkcia () vrátiť gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Prvý riadok definuje úlohu s názvom kópia. V tomto rámci používame nástroj gulp.src na určenie súborov, na ktoré zacieľujeme s touto úlohou - v tomto prípade ide o jeden súbor s názvom to_copy.txt.

Potrebujeme tieto súbory na funkciu gulp.dest, ktorá určuje, kam chceme dať tieto súbory - používam adresár dev.

Vráťte sa späť do terminálu a napíšte gulp kópiu Ak chcete spustiť túto úlohu, mal by skopírovať zadaný súbor do určeného adresára, niečo ako toto:

Príkaz potrubia je v srdci Gulpa. Je to efektívny spôsob presunu dát medzi príkazmi. Príkaz src špecifikuje súbory, ktoré sú pripojené k príkazu dest. V zložitejších scenároch by sme naše súbory nakreslili na iné príkazy pred zadaním určenia.

Tiež by ste mali vedieť, že zdroj môže byť uvedený ako jeden súbor alebo viacero súborov. Ak máme názov priečinka výroba a chceme presunúť všetky súbory z našich vývoj do nej, môžeme použiť nasledujúci príkaz:

gulp.task ('kopírovanie', funkcia () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Hviezda bude zodpovedať čokoľvek v rámci adresára. Mohli by ste tiež prispôsobiť všetky súbory vo všetkých podadresároch a urobiť nejaké iné fantazie. Pre viac informácií si pozrite dokumentáciu uzla-glob.

Zostavovanie SASS

Kompilácia šablóny zo súborov SASS je bežnou úlohou pre vývojárov. To sa dá urobiť s Gulpom celkom ľahko, ale budeme musieť urobiť nejakú prípravu. Okrem základných príkazov, ako je src, dest a mnoho ďalších, všetky funkcie sa pridávajú prostredníctvom adries tretích strán. Tu je postup, ako ich používam.

Píšem SASS Gulp do Google, prvý výsledok je zvyčajne to, čo potrebujem, mali by ste nájsť stránku pre balík SASS. Ukáže vám, ako ho nainštalovať (npm install gulp-sass). Je pravdepodobné, že budete musieť sudo nainštalovať ako správcu, takže pravdepodobne bude (sudo npm install gulp-sass) .

Po dokončení môžete použiť syntax, ktorý balík požaduje na zostavenie kódu. Ak chcete urobiť, vytvorte súbor s názvom styles.scss s nasledujúcim obsahom:

$ primary: # ff9900; telo background: $ primary; 

Teraz vytvorte nasledujúcu úlohu Gulp v Gulpfile.

gulp.task ('sass', funkcia () gulp.src ('* .sqss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Pred spustením príkazu nezabudnite "vyžadovať" balík v hornej časti súboru Gulpfile takto:

var sass = vyžadovať ("gulp-sass");

Keď spustíte dúšok, všetky súbory s rozšírením scss budú pripojené k funkcii Sass, ktorá ich prevedie na css. Tie sú potom prepojené na cieľovú funkciu, ktorá ich umiestni do priečinka css.

Sledovanie súborov a priečinkov

Zatiaľ to všetko je užitočné, ale stále potrebujeme napísať príkaz zakaždým chceme spustiť úlohu, ktorá nie je veľmi efektívna, najmä pokiaľ ide o zmeny štýlov. Gulp umožňuje sledovať súbory na zmeny a spustiť príkazy automaticky.

V Gulpfile vytvorte príkaz s názvom automatizovať ktorý použije príkaz sledovania na sledovanie súboru súborov na zmeny a spustenie konkrétneho príkazu pri zmene súboru.

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

Ak píšete automat na gulp do terminálu začne a dokončí úlohu, ale nevráti sa k výzve, pretože monitoruje zmeny. Určili sme, že chceme sledovať všetky skryté súbory v koreňovom adresári a ak sa zmenia, chceme spustiť príkaz sass, ktorý sme nastavili predtým.

Ak teraz zmeníte súbor style.scss, mal by byť automaticky zostavený do súboru css v adresári css.

Spúšťanie viacerých úloh

Existuje veľa situácií, v ktorých možno budete chcieť spustiť viac úloh. Pri sledovaní priečinka javascript možno budete chcieť kompilovať zlučovať dva súbory a potom ich pokračovať. Existujú dva spôsoby, ako to urobiť.

Ak sú úlohy spojené, chcem to reťaze. Dobrým príkladom by bolo zlučovanie a zmenšovanie súborov javascript. Najprv nakreslíme naše súbory do konkávnych akcií, potom ich nakreslíme, aby sme ich uškrtili, potom použite cieľovú funkciu na ich výstup.

Ak úlohy nesúvisia, môžete volanie viacerých úloh. Príkladom by bola úloha, v ktorej by sme chceli spojiť a skompromitovať naše skripty a tiež zostaviť náš SASS. Tu je plný Gulpfile, ako to bude vyzerať.

var gulp = vyžadujú ("gulp"); var uglify = vyžadujú ("gulp-uglify"); var concat = vyžadujú ("gulp-concat"); var sass = vyžadovať ("gulp-sass"); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js' ). pip (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ("štýly", funkcia () gulp.src ('/ * .sss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', funkcia () gulp.watch (['* .skss', 'js / ** / *. js'], ['skripty', 'styly']); gulp.task ("predvolené", ["skripty", "štýly"]);

Ak píšete gulp skripty do terminálu budú všetky súbory javascriptu v adresári js prepojené, budú výstupné do hlavného adresára, potom uglifikované a uložené do hlavného adresára.

Ak píšete dúšok, všetky vaše skss súbory budú zostavené a uložené do adresára css.

Ak píšete dúšok (predvolená úloha), vaša skripty úloha bude spustená, potom nasleduje vaše štýly úloha.

automat na gulp úloha sleduje viacero priečinkov pre zmeny v našich súboroch scss a js a vykoná obe definované úlohy, ak je zistená zmena.

Prehľad

Používanie Gulpu nie je ťažké, v skutočnosti si to mnohí ľudia dávajú prednosť pred Gruntom kvôli jednoduchej syntaxi. Pamätajte na kroky, ktoré je potrebné urobiť pri vytváraní novej automatizácie:

• Vyhľadajte doplnok
• Inštalovať doplnok
• Požadovať plugin vo vašom Gulpfile
• Syntax použite v dokumentácii

Päť príkazov dostupných v službe Gulp (úloha, spustenie, sledovanie, src, dest) je jediné, čo potrebujete vedieť, všetky addony tretích strán majú skvelú dokumentáciu. Tu je zoznam niektorých vecí, ktoré používam a ktoré by ste mohli začať práve teraz:

• Optimalizácia obrázkov pomocou optimalizácie gulp-image
• Vytváranie obrazových skrípt s gulp-sprite
• Zosúlaďovanie súborov s gulp-concat
• Zmieňanie súborov s hnilobou-uglify
• Odstraňovanie súborov s gulp-del
• Javascript linting s gulp-jslint
• JSON linting s gulp-jsonlint
• Autoprefix CSS s gulp-autoprefixer
• Vyhľadať a nahradiť pomocou gulp-frep
• Zmenšiť CSS s gulp-minify-css