U každého projektu, jsou vždy určité stejné úkony, které děláme nebo používáme opakovaně. Tak proč to nenechat dělat stroj za nás automatický? Pojďme to rozdělit na skupiny.
- CSS
- grunt-sass
- grunt-postcss
- autoprefixer
- cssnano
- postcss-object-fit-images
- postcss-pxtorem
- postcss-flexbugs-fixes
- HTML
- grunt-preprocess
- JavaScript
- grunt-contrib-jshint
- grunt-contrib-concat
- grunt-contrib-uglify
- Obrázky
- grunt-contrib-imagemin
- Ostatní
- grunt-browser-sync
- grunt-contrib-watch
- load-grunt-tasks
- time-grunt
- grunt-ftp-push
CSS
CSS styly obvykle píšeme v preprocessoru. Chceme automatickou kontrolu kódu, pro co nejsnadnější opravu. Prefixujeme, fallbackujeme, minifikujeme atd. Ukažme si must have pluginy:
Sass – preprocessor #
V čem píšete CSS styly? Já píšu v SCSS. Pokud píšete v něčem jiném (less / stylus / sass), pak si musíte použit jiný plugin pro kompilaci.
PostCSS #
Nástroj, který přechroustá CSS styly pomoci javascriptu. Lze ho rozšiřovat o pluginy, ve kterých je jeho obrovská síla! Jakoukoliv CSS funkci, kterou si dokážete představit, lze napsat v PostCSS. Dokonce si troufám říci, že již existuje. Nevěříte? Tak schválně! Najdete zde, mezi všemi PostCSS pluginy, všechny potřebné optimalizace?
Všechny následující CSS pluginy, které zde uvádím jsou pluginy pro PostCss.
Autoprefixer – prefixy #
Pamatovat si pro jaká CSS pravidla psát -prefix- je těžké. Dnešní prohlížeče se vyvíjejí a věcí se rychle mění. Preprocessorové mixiny nemusí být aktuální. Pište CSS3 kód bez prefixů! Veškeré prefixy doplní plugin na základě dat z Can I Use sám automatický. A dokonce si můžete nastavit jaké prohlížeče chcete podporovat a prefixy se tomu přizpůsobí!
Cssnano – minifikace #
Jedna z nejlepších knihoven, která se postará o minifikaci a pročištění CSS stylů.
Object-fit-images – polyfill #
Tento plugin automatický doplňuje CSS pravidla tak, aby nám fungovala CSS vlastnost object-fit:cover. Aby to správně fungovalo, budete potřebovat počíst tento polyfill.
Pxtorem – převod na relativní jednotky #
Na internetu je plno článků o tom, proč nepsat weby v pevných jednotkách (px), ale v jednotkách relativních (em/rem/vw apod). Pxtorem plugin je dokonalým řešením, protože kód píšete v PX jednotkách a na produkci se všechno převede do jednotek REM. Je to tak jednoduché!
Fexbugs fixes #
Syntaxe flexboxu je občas vnímána různými způsoby v různých prohlížečích. Tento plugin nám pomůže opravit některé nekonzistence automatický.
HTML
Preprocess – jednoduché vkládání HTML komponent #
Při psaní statických HTML stránek je potřeba věci zachovat v jednoduchosti. Přesto bychom si rádi pomohli alespoň jednoduchým includem často používaných komponent, nebo celků (hlavička, patička, sidebar apod).
JavaScript
Jshint – validace #
Velký pomocník při hledání jehly v kupě sena, obzvlášť pokud javascript není vaši silnou stránkou.
Concat – sloučení #
Pomůže z množství souborů udělat jeden celek. Docílíme tak automatické optimalizace rychlosti. Ale pozor! Pokud používáte velké knihovny typu jQuery, slick apod je lepší je vkládat samostatně.
Uglify – minifikace #
Všechny JavaScripty, které na web vkládáme je nutné minifikovat! Šetříme tak data a pomáháme rychlosti načítání.
Obrázky
Jsou nejčastějším důvodem pomalých webů.
Imagemin #
Postará se o kompresi PNG, JPG, SVG, dokonce i GIF. Má vysokou škálu různých nastavení a úrovní kompresi.
Ostatní
V této sekci jsou neméně důležité pluginy, které nám zrychlí a usnadní vývoj.
Browser sync – testování #
Debugování v reálném čase. Umožňuje synchronizaci projektu na virtuálním serveru. V praxi to využijete, když najdete chybu např. ve svém telefonu. Opravíte CSS kód, automatický se to aktualizuje v PC i mobilu. Rychlé, snadné, to chcete.
Watch – hlídání změn #
Neexistuje lepší pocit, než po změně jakéhokoliv zdroje (html, css, js, img) se automatický provedou grunt úkoly a po pár milisekundách po uložení se automatický aktualizuje prohlížeč ve kterém vyvíjíte. Ruční aktualizace prohlížeče po každé změně? Už nikdy!
Load tasks – usnadnění gruntu #
Grunt sám o sobě má menší nevýhodu, že každý instalovaný plugin je potřeba explicitně volat v gruntfile. Tento plugin řeší jeho nevýhodu a dělá to automatický za nás.
Time – vizualizace progressu #
V konzoli obvykle nic nevyčteme. Tento plugin vizualizuje progressbary jednotlivých grunt úkolu.
FTP push # – odeslání na vzdálený server
Pokud soubory potřebujete poslat někam na vzdálený server pak je to ideální volba. Používal jsem to u každého projektu pro prezentační účely. Dnes používám automatický deploy na netlify, který je o dost pohodlnější.
Stojí za vyzkoušení
Zahlédl jsem ještě pár pluginů, které vypadají velmi zajímavě, ale sám jsem je ještě nezkoušel. Jedna se o:
- grunt-manifest – cachování souborů
- grunt-cache-bust – doplní hash proti cachování
Shrnutí
Není toho málo, ale pokud se všechno správně nastaví, tak dokáže šetřit obrovské množství času. Všechny uvedené pluginy používám ve svém vývojovém prostředí, na velké, ale i jednostránkové projekty. Ideální je, když si nastavíte výchozí šablonu na které budete stavět všechny projekty. Pak je vývoj mnohem příjemnější 🙂
