Přejít k navigační liště

Zdroják » Webdesign » Frontendistův průvodce Gruntem

Frontendistův průvodce Gruntem

Články Webdesign

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.

Nálepky:

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

Subscribe
Upozornit na
guest
15 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Tomas Jurman

Ahoj Martine
pěkný článek. Grunt aktivně používám už 1/2 roku a už si neumím práci bez něj předtavit. Trochu divně v textu zní:
Nadpis: „Grunt úlohy co využívám“
Předposlední odrážka: „… Chystám se vyzkoušet.“
Pála. Těším se na pokračování článku a další zajímavé moduly pro Grunt.

fos4

grunt používám dlouho, takže jsem zůstal u kombinace grunt-regarde + grunt-contrib-livereload + grunt-contrib-(stylus|coffeescript).

Ten „nový“ grunt-watch mně nějak nesedí, je příliš pomalý o proti výše popsané kombinaci (1-2s vs 0.2-0.5s).

Má někdo podobnou zkušenost nebo mám jen špatně gruntfile ?

Srigi

grunt-regarde je uz mrtvy, deprecated projekt. Ked sa chce, aj grunt-contrib-watch vie byt rychly.

AdamKudrna

Grunt používám už dlouho, ale zmíněný BrowserSync moje workflow významně upgradoval. Jinak soubor s Node.js moduly se jmenuje package.json (patrně překlep).

jan.panschab

Už jsem to psal do diskuze k originálnímu článku. Kopíruju i sem. Snad to někoho bude zajímat.
Pro inspiraci přikládám pár tipů, co používám já.

CSS

JS

HTML

  • assemble – generátor statických stránek

IMG

Obecné

daniel.steigerwald

Grunt jsem používal přes rok ale nedávno jsem úspěšně zmigroval na gulpjs.com
Grunt není špatný, ale je jako Trabant. Šílený auto, přesto stokrát lepší než chodit pěžky.
Úvodní prezentace, proč vlastně gulp vznikl: http://slides.com/contra/gulp
Jestli jste spokojeni s Gruntem, zůstaňte u něj. Jestli chcete vyladit svůj dev stack od začátku, jděte do Gulpu. Jestli chcete opravdu rychlý watch pro stovky souborů, aniž byste utavili CPU, použijte můj Grunt Este watch plugin: https://github.com/steida/grunt-este-watch Nedávno jsem jej přemigroval do samostatného npm modulu i Gulp pluginu.

Jano

Gulp (aj grunt) som začal používať a oba vyzerali velmi dobre. Čo ma ale odradilo, je nemožnosť ich nainštalovať globálne.

Príde mi to ako vždy inštalovať nový editor kódu pre každý projekt – vždy stovky nových súborov v každej zložke projektu. Kvoli minifikácii a kompilácii pár js a less súborov mi to za to nestálo. (napr. zálohy disku trvali ovela dlhšie). Viem že je to kvoli tomu aby všetci vývojári pracovali s rovnakou verziou pluginov, ale ja aj tak budem využívať vždy len jednu (najnovšiu).

Prešiel som radšej na samostatné nástroje – každý vie jednu vec, ale dá sa jednorazovo nainštalovať a používať vo všetkých projektoch.

jlx

npm install -g ... ?

martin_katrenik

easy peasy

npm install -g some-module (nainstaluje globalne)
cd ~/my-project && npm link some-module

a potom klasicky

var module = require('some-module')
Jano

Diky, toto určite skúsim.

TomasStankovic

npm balíčky sa však globálne inštalovať neodporúča, verzie baíčkov sa predsa viažu vždy ku konkrétnemu projektu… globálne grunt, gulp, bower a pod… Neni predsa možné kontrolovať vśetky staré projekty či sa nerozsypali a následne ich fixovať len kvôli tomu že v novom projekte chcem novú feature nejakého modulu…

andylaci

Chcem urcite zacat pouzivat 1 z toolov na tieto tasky, ale pocul som, ze gulp je jednoduchsi a vela ludi na nho dokonca prechadza z gruntu. Co je na tom pravdy?

Pavel Lang

Gulp se podle mě vydal lepší cestou. Z prezentace, na kterou odkazuje Danův komentář je to patrné z ukázky odpovídajícího Gruntfile a Gulpfile.

Jirka Novák

Ještě by se mohl hodit https://www.npmjs.org/package/load-grunt-config, který umožňuje rozdělení konfigurace jednotlivých tasků do samostatných souborů. Více informací http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

Bohdan Ganický

screenshot

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.