Frontendistův průvodce Gruntem

Grunt je robot automatizující nudné úkoly na frontendu s potenciálem ušetřit vám velké množství práce. V článku se podíváme, proč ho používat, jaké úlohy si v něm nastavit a jak si Grunt rozjet.

Tento článek původně vyšel na webu Vzhůru dolů.

Grunt [grŭnt] si říká „The JavaScript Task Runner“ a má v logu divočáka. Ale není to nic jiného než robot sloužící webovým vývojářům. Automatizuje opakující se nebo nudné úkoly.

V praxi to vypadá tak, že si něco spustíte na příkazové řádce, ono vám to hlídá změny v souborech a po jejich provedení vyvolá nějaké akce. Další úlohy se zase spouštějí ručně, třeba nahrání webu na server.

Jednoduchým příkladem budiž minifikace CSS, JS souborů. Nebo jejich spojování do jednoho kvůli šetření requestů pro zvýšení rychlosti načítání. Nebo zpracování preprocesorového kódu do CSS či kompilace CoffeeScriptu do JavaScriptu. Zdá se vám to málo? Pak vězte, že úloh jsou stovky – a je docela snadné si napsat vlastní.

Grunt.js

Důvody, proč mám Grunt rád, nejlíp ukáže seznam úloh, co využívám nebo se na to v nejbližší době chystám.

Grunt úlohy co využívám

  • Kompilace LESS, SASS, Stylus do CSS. To by ale nedávalo smysl bez automatického sledování změn pomocí pomocí grunt-contrib-watch. Nesmím zapomenout na generování Source Maps.
  • Minifikace CSSek pomocí cssmin a Javascriptů pomocí uglify.
  • Spojování souborů pomocí concat.
  • Automatický reload prohlížeče pomocí livereload funkce watch úlohy. Daleko lepší je to ovšem pomocí injektáže změněného kódu bez reloadu. grunt-browser-sync je boží!
  • Menší projekty nahrávám na FTP pomocí ftp-deploy. V Gruntu můžete tasky spojovat, takže můj vlastní grunt deploy spojí, minifikuje JS/CSS a nahraje soubory na FTP.
  • Pomocí grunt-styledocco generuji u větších projektů dokumentaci k LESS komponentám.
  • legacssy Robina Pokorného za mě řeší fallback fallback pro IE8, když kód píšu mobile first.
  • Hrozně se mi líbí grunticon, který řeší kompletní workflow (minifikaci, fallbacky v PNG i generování CSS kódu), pokud chcete ikonky ve vektorech. Chystám se vyzkoušet.
  • autoprefixer zase doplňuje CSS3 prefixy, takže jsou vždy aktuální (podle CanIUse.com) a není potřeba využívat neaktuálních CSS3 mixinů.

To jde, ne? A to si myslím, že jsem jen mírně pokročilý uživatel Gruntu a čeká mě ještě hooodně objevování.

Proč Grunt?

Pokud si rádi šetříte práci, je Grunt naprosto návyková záležitost.

Dobré je ale zmínit, že pro používání Gruntu musíte alespoň trochu kamarádit s příkazovou řádkou. Žádné pokročilé vědomosti potřeba nejsou. Autor článku kolem příkazové řádky chodí po špičkách, ale s Gruntem se skamarádil docela rychle.

Grunt má alternativy v podobě GUI robotů typu CodeKit, Prepros nebo Koala. Jenže ty umí fakt jen ty základní úlohy typu kompilace, minifikace, spojování. Maximálně ještě tvorbu Source Maps.

Grunt je robot nevykleštěný. Umí toho daleko víc. Navíc jeho konfigurák (Gruntfile.js) verzujete, takže nastavení úloh sdílíte se všemi členy týmu. Nemusíte se tak bát, že jeden vývojář kompiluje LESS kód jedním způsobem a druhý jiným. A úlohu, kterou si napíše jeden lenivý vývojář pro šetření práce, sdílí celý tým.

Autor článku pořádá společně s Riki Fridrichem půldenní školení
Automatizace s Grunt, Bower, Yeoman, kde si Grunt můžete vyzkoušet v praxi.

Jak si Grunt rozjet?

Popíšu to velice zjednodušeně. Více je v dokumentaci Gruntu.

  1. První, co potřebujete, je instalace Node.js. Pak byste měli mít k dispozici instalátor Node balíčků, npm.
  2. Druhý krok je nainstalovat (jako administrátor) samotný Grunt: npm install -g grunt-cli
  3. Jednotlivé Grunt úlohy (pluginy) se pak instalují jako další Node balíčky už do konkrétního adresáře. Třeba kompilátor LESSu takhle: npm install grunt-contrib-less --save-dev
  4. V adresáři projektu se vám takhle vytvoří konfigurák se seznamem Node balíčků, které používáte — packages.json.
  5. Teď už stačí jen nakonfigurovat Grunt úkoly. Dělá se to souborem Gruntfile.js, který byste si měli napsat sami. Tady je popsaný víc.
  6. Když už tedy máte nainstalovaný Node, nainstalovaný Grunt, nainstalované Node balíčky pro Grunt úlohy a Gruntfile s konfigurací, můžete Gruntu říci, aby vám zobrazil všechny dostupné příkazy: grunt --help.

Další materiál ke studiu v češtině:

Komentáře: 15

Přehled komentářů

Tomas Jurman Grunt je tahoun
fos4 grunt-watch
Igor Hlina Re: grunt-watch
AdamKudrna BrowserSync
jan.panschab Zajímavé tasky
daniel.steigerwald
Jano Re:
jlx Re:
martin_katrenik Re:
Jano Re:
TomasStankovic Re:
andylaci gulp
Pavel Lang Gulp
Jirka Novák Rozdělení Gruntfile.js
bohdan.ganicky ...ještě pár tasků
Zdroj: https://www.zdrojak.cz/?p=11843