Ako používať Grunt na automatizáciu vášho pracovného postupu [Návody]

Ja som obrovský zástanca automatizácie pretože to robí život oveľa jednoduchším. Prečo tráviť čas na hrôzostrašných, monotónnych úlohách, ktoré nasávajú vašu životnú silu hneď, keď máte počítač, ktorý vám dá veci? To platí najmä pre vývoj webových aplikácií.

Mnohé rozvojové úlohy môžu byť prácou. Pri vývoji môžete chcieť kompilovať kód, keď tlačíte vývojovú verziu, ktorá by mohla spájať a upravovať súbory, odstrániť iba vývojové prostriedky a tak ďalej. Dokonca aj relatívne nekomplikované, ako je napríklad odstránenie veľa súborov alebo premenovanie zložiek môže zaberať veľkú časť našej doby.

V tomto článku vám ukážem, ako môžete uľahčiť život tým, že využijete vynikajúcu funkčnosť, ktorú ponúka Grunt, úloha pre Javascript. Prevediem vás celým procesom, takže sa nemusíte obávať, aj keď nie ste sprievodca Javascriptom!

Viac informácií o Hongkiat.com:

• CSSMatic zjednodušuje CSS pre tvorcov webových stránok
• Automatizácia úloh v systéme Mac s akciami priečinkov
• Automatizujte súbory Dropbox s akciami
• 10 aplikácií na automatizáciu úloh v zariadení Android
• Ako (automaticky) zálohovať vaše webové stránky do Dropbox

Inštalácia Grunt

Inštalácia programu Grunt je pomerne jednoduchá, pretože používa správcu balíkov uzlov. To znamená, že budete možno musieť nainštalovať samotný uzol. Otvorte terminál alebo príkazový riadok (odteraz budem volať tento terminál) a vstúpte nmp -v.

Ak uvidíte číslo verzie, ktoré máte NPM ak sa zobrazí chyba "príkaz nebol nájdený", musíte ho nainštalovať tak, že prejdete na stránku sťahovania uzla a vyberiete potrebnú verziu.

Akonáhle je Node nainštalovaný, dostať Grunt je záležitosť jediného príkazu vydaného v termináli:

npm inštalovať -g grunt-cli

Základné použitie

Budete používať Grunt na základe projektu, nakoľko každý projekt bude mať rôzne požiadavky. Začnime projekt teraz vytvorením priečinka a navigovaním k nemu cez náš terminál.

Dve súbory tvoria srdce Grunt: package.json a Gruntfile.js. Súbor balíka definuje všetky závislosti tretích strán, ktoré vaša automatizácia použije, Gruntfile vám umožní ovládať ako presne tie sa používajú. Vytvorme balík s balíkmi holých kostí teraz s nasledujúcim obsahom:

"name": "test-project", "verzia": "1.0", "devDependencies": "grunt": "~ 0.4.5"

Názov a verzia je na vás, závislosti musia obsahovať všetky balíky, ktoré používate. V súčasnosti nič nerobíme, aby sme sa ubezpečili, že samotný Grunt je pridaný ako závislosť.

Môžete sa pýtať sami seba, čo to robí tichej línie (~) talde.

Verzie sa môžu vyžadovať pomocou pravidiel zo sémantického editora pre npm. Stručne:

• Zadáte presnú verziu, ako je 4.5.2
• Môžete použiť viac ako / menej ako na označenie minimálnej alebo maximálnej verzie, ako napr > 4.0.3
• Použitie tildu určuje blok verzie. Použitím ~ 1.2 sa považuje za 1.2.x, akákoľvek verzia nad 1.2.0, ale nižšia ako 1.3

Mnoho spôsobov špecifikácie verzií je k dispozícii, ale to je pre väčšinu potrieb dostatočné. Ďalším krokom je vytvorenie súboru Gruntfile, ktorý bude vykonávať naše automatizácie.

 modul.exports = funkcia (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ("predvolené", []); ; 

Toto je v podstate skelet pre Gruntfile; existujú dve miesta záujmu. Jedno miesto je vo vnútri initConfig () Funkcie. Práve tu prebieha všetka konfigurácia projektu. Bude to zahŕňať spracovanie súborov LESS / SASS, skomprimovanie skriptov atď.

Druhé umiestnenie je pod touto funkciou, kde špecifikujete úlohy. Môžete vidieť jednu zadanú úlohu s názvom “štandardné”. V súčasnosti je prázdna, takže nič nerobí, ale neskôr to rozšírime. Úlohy v podstate ukladajú bity a kusy z našej konfigurácie projektu a vykonajú ich.

Napríklad úloha s názvom “skripty” môže zlučovať všetky naše skripty, minifikovať výsledný súbor a potom ho presunúť na jeho konečné miesto. Tieto tri akcie sú definované v konfigurácii projektu, ale sú “vytiahli” úlohou. Ak to nie je jasné, len sa nemusíte obávať, ukážem vám, ako sa to deje.

Naša prvá úloha

Vytvorme si úlohu, ktorá pre nás zmenší jeden súbor javascript.

Existujú štyri veci, ktoré musíme urobiť kedykoľvek chceme pridať novú úlohu:

• Ak je to potrebné, nainštalujte doplnok
• Vyžadovať to v Gruntfile
• Napíšte úlohu
• Ak to bude potrebné, pridajte ju do skupiny úloh

(1) Nájsť a inštalovať Plugin

Najjednoduchší spôsob, ako nájsť plugin, ktorý potrebujete, je napísať niečo takéto do Google: “minify javascript grunt plugin”. Prvý výsledok by vás mal viesť do modulu grunt-contrib-uglify, ktorý je práve to, čo potrebujeme.

Stránka Github vám povie všetko, čo potrebujete vedieť. Inštalácia je jediný riadok v termináli, tu je to, čo potrebujete použiť:

 npm nainštalovať grunt-contrib-uglify -save-dev 

Možno budete musieť spustiť túto správu s právami administrátora. Ak máte niečo podobné npm ERR! Skúste tento príkaz spustiť znova ako root / Administrator. po ceste len zadajte sudo pred príkazom a po výzve zadajte heslo:

 sudo npm nainštalovať grunt-contrib-uglify - save-dev 

Tento príkaz skutočne analyzuje vaše package.json súbor a pridáva ho ako závislosť, nebudete musieť robiť to manuálne.

(2) Vyžadovať v Gruntfile

Ďalším krokom je pridanie Gruntfile ako požiadavky. Rád pridám doplnky v hornej časti súboru, tu je môj kompletný Gruntfile po pridaní grunt.loadNpmTasks ( 'Grunt-contrib-zohyzdit');.

 modul.exports = funkcia (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ("predvolené", []); ; 

(3) Vytvorte úlohu na zmenšovanie skriptov

Ako sme hovorili, malo by sa to stať v rámci initConfig () Funkcie. Stránka Github pre plugin (a pre väčšinu ďalších pluginov) poskytuje množstvo informácií a príkladov. Tu je to, čo som použil v mojom testovacom projekte.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

To je celkom jednoduché, špecifikoval som scripts.js v adresári js projektu v mojom projekte a na mieste určenia pre zmenšený súbor. Existuje mnoho spôsobov, ako môžete špecifikovať zdrojové súbory, pozrieť sa na to neskôr.

Teraz sa pozrieme na kompletný súbor Gruntfile po tom, čo sme pridali, aby ste sa uistili,.

 modul.exports = funkcia (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ("predvolené", []); ; 

(4) Pridajte túto konfiguráciu do skupiny úloh

Práve teraz môžete ísť na terminál a písať zamračiť sa ale budeme potrebovať skupiny úloh, aby neskôr spustili viac úloh. Máme predvolenú úlohu prázdnu a čakáme na niečo, čo sa má pridať, takže ju upravíme nasledovne:

 grunt.registerTask ('default', 'uglify')); 

V tomto štádiu by ste mali byť schopní prejsť do terminálu, napíšte zachrochtání a pozrite sa na minifikáciu. Nezabudnite vytvoriť scripts.js súbor samozrejme!

To netrvalo veľa času na to, aby to bolo možné? Dokonca aj keď ste na to všetko všetci noví a trvalo nejaký čas na to, aby ste pracovali krokmi, čas, ktorý šetrí, prekročí čas strávený v priebehu niekoľkých použití.

Zlučovanie súborov

Pozrime sa na spojovacie súbory a dozviete sa, ako určiť viacero súborov ako cieľ pozdĺž cesty.

Zlučovanie je proces kombinovania obsahu viacerých súborov do jedného súboru. Budeme potrebovať plugin grunt-contrib-concat. Postupme podľa krokov:

Ak chcete nainštalovať doplnok, použite ho npm nainštalovať grunt-contrib-concat -save-dev v termináli. Akonáhle je hotovo, nezabudnite ho pridať do Gruntfile rovnako ako pred použitím grunt.loadNpmTasks ( 'Grunt-contrib-concat');.

Nasledujúca konfigurácia. Skombinujeme tri špecifické súbory, syntax bude známy.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js' ,, 

Vo vyššie uvedenom kóde sa uvádzajú tri súbory, ktoré sú uvedené ako zdroj, a tieto sa skombinujú do súboru daného ako cieľ.

To je už dosť silné, ale čo keď sa pridá nový súbor? Potrebujeme sa tam celú dobu vrátiť? Samozrejme, nie, môžeme špecifikovať celý súbor súborov, ktoré sa majú spojiť.

 concat: dist: src: 'dev / js / *. js'], dest: 'js / scripts.js',,, 

Teraz každý súbor javascript v priečinku dev / js bude zlúčený do jedného veľkého súboru: js / scripts.js, oveľa lepšie!

Teraz je čas vytvoriť úlohu, aby sme mohli skutočne spojiť niektoré súbory.

 grunt.registerTask ("mergejs", ['concat']); 

Toto už nie je predvolená úloha, takže budeme musieť zadať jeho meno do terminálu, keď vydáme zachrochtání príkaz.

 grunt mergejs 

Automatizácia automatizácie

Už sme dosiahli veľa pokrokov, ale je tu ešte viac! Teraz, keď chcete zladiť alebo zmenšiť, musíte prejsť na terminál a napísať príslušný príkaz. Je najvyšší čas, aby sme sa pozreli na hodinky čo nám to urobí. Naučíme sa tiež, ako vykonať viaceré úlohy naraz, po ceste.

Aby sme mohli pokračovať, budeme musieť chytiť grunt-contrib-watch. Som si istý, že ho môžete nainštalovať a teraz ho pridáte do Gruntfile yuor, takže začnem tým, že vám ukážem, čo používam v mojom testovacom projekte.

 sledovať: scripts: files: ['dev / js / *. js'], úlohy: [concat ',' uglify '],, 

Nazval som súbor súborov na sledovanie “skripty”, len viem, čo to robí. V rámci tohto objektu som určil súbory na sledovanie a spustenie úloh. V predchádzajúcom príklade zlučovania sme zostavili všetky súbory v adresári dev / js.

V miniatúrnom príklade sme tento súbor minimalizovali. Je zmysluplné pozerať sa na zmeny v zložke dev / js a spustiť tieto úlohy vždy, keď sú k dispozícii.

Ako môžete vidieť, viacero úloh sa dá jednoducho nazvať tým, že ich oddeľujete čiarkami. Budú sa vykonávať v poradí, najprv zlučovanie, potom zmierňovanie v tomto prípade. To je možné vykonať aj so skupinami úloh, čo je dôvod, prečo existujú.

Teraz môžeme zmeniť svoju predvolenú úlohu:

 grunt.registerTask ('default', 'concat', 'uglify')); 

Teraz máme dve možnosti. Kedykoľvek chcete skombinovať a skomprimovať svoje skripty, môžete prepnúť na terminál a napísať zachrochtání. Príkaz sledovania môžete použiť aj na spustenie sledovania súborov: hlúpe hodinky.

Sedí tam a čaká na vás, aby ste tieto súbory upravili. Akonáhle to urobíte, bude vykonávať všetky priradené úlohy, pokračujte, skúste to.

To je oveľa lepšie, žiadny vstup nie je od nás potrebný. Teraz môžete pracovať so svojimi súbormi a všetko bude pekne urobené pre vás.

Prehľad

S týmito rudimentárnymi vedomosťami o tom, ako môžu byť inštalované a používané pluginy a ako funguje príkaz sledovania, ste všetci pripravení stať sa automatizovaným závislým. Je to oveľa viac, než to, čo sme diskutovali, ale nič, s čím by ste sa nedokázali vyriešiť.

Použitie príkazov na kompiláciu SASS, optimalizáciu obrázkov, automatické opravy a ďalšie je len otázka sledovania krokov, ktoré sme prerokovali, a čítanie syntaxe, ktorú plugin vyžaduje.

Ak viete o niektorých obzvlášť skvelých použitiach pre Grunt, dajte nám vedieť v komentároch, vždy nás zaujíma, ako používate nástroje ako Grunt!