Obsah
Běžci úloh v jazyce JavaScript, jako je Grunt, se stali velmi oblíbenými u front-endových vývojářů. Je to proto, že pomáhají dělat jednu věc, kterou všichni chceme dělat v naší práci - šetřit čas!
Ale vzhledem k tomu, že je nyní k dispozici více než 5 000 (a stále se počítajících) pluginů Grunt, může být pro vývojáře těžké tyto „diamanty v surovém stavu“ najít. Podívali jsme se zpět na naši dobu, kdy jsme se zasekli v Grunt, abychom našli perfektní recept Grunt pluginů, které byste měli používat.
01. Zvětšit
Každý front-endový vývojář, který si stojí za svou sůl, ví o výhodách minifikace souborů JavaScriptu, a přesně to tento plugin dělá. Taková je jeho popularita, ve skutečnosti je zahrnuta v příručce Začínáme s Gruntem. I přes název lze tento plugin použít také ke zkrášlení vašeho kódu JavaScript - i když to není pro produkční použití nijak zvlášť užitečné.
02. Sass
Možná proběhne nějaká debata o tom, který předspracovatel CSS skutečně vládne hřadům, ale tady v Stickyeyes jsme se rozhodli spíše pro Sass než pro jeho hlavního rivala Less. Tento modul plug-in nám umožňuje psát naše soubory Sass a nechat je automaticky kompilovat do CSS. Výhodou použití předspracovače CSS je samostatný článek, ale lze říci, že pokud už žádný nepoužíváte, jste na párty velmi pozdě!
03. CSSMin
Tento plugin je ekvivalentem CSS Uglify. Jednoduše získá všechny určené soubory CSS a minifikuje je. Samozřejmě, pokud to budete používat ve spojení s pluginem Sass, musíte zajistit, aby byl tento úkol spuštěn po úkolu Sass.
Existuje mnoho alternativ k CSSMin, které mohou také zmenšit velikost vašich souborů CSS pomocí mírně odlišných technik; CSS nano, CSS wring, CSS zmenšení atd. Přečtěte si tento praktický test, pokud máte rádi tento typ věcí.
04. Concat
Jak název napovídá, tento plugin jednoduše vezme více souborů a spojí je do jednoho. Stejně jako u kódu minifikace je zřetězení souborů také starodávným doporučeným postupem pro zkrácení doby načítání stránky.
Zřetězení souborů by mělo být vždy použito v produkci pro JavaScript i CSS. Toto je obvykle poslední úkol, který se má spustit - po úkolu předběžného zpracování CSS a úkolu minifikace. Je snadné jednoduše říct tomuto pluginu, aby zřetězil všechny soubory v určitém adresáři, ale dejte si pozor na pořadí, ve kterém budou soubory zřetězeny - možná budete muset zadat konkrétní pořadí nebo pojmenovat soubory, aby byly vždy zřetězeny v požadovaném pořadí .
05. ImageMin
Ve stejném duchu jako CSSMin a Uglify řeší ImageMin další starodávný problém pro načítání stránky - velikost obrazového souboru. „Minifikace“ obrázku je obvykle prvním portem volání pro optimalizaci, takže tento plugin je nezbytný pro co největší snížení celkové velikosti souboru stránky.
Pokud pracujete s JPG, PNG, GIF nebo SVG (stále populárnější formát vektorových obrázků), výsledkem tohoto pluginu bude bezztrátové zmenšení velikosti souboru obrázků, aniž byste museli zvednout prst. Pokud máte ve svém projektu hodně obrázků, je vhodné spustit tento úkol, pouze když tlačíte na produkci, spíše než spustit tento úkol na události sledování (viz další bod).
06. Sledujte
Tento plugin ve skutečnosti neovlivňuje front-end vašeho webu, ale je nesmírně užitečný při vytváření efektivního procesu Grunt. Watch jednoduše dohlíží na všechny adresáře, které určíte, a jakmile se něco změní, automaticky spustí určité úkoly Grunt.
Můžete tedy nastavit jednu podmínku sledování v adresáři „js“ pro spouštění úkolů JavaScriptu a další v adresáři „css“ pro spouštění úkolů CSS. To znamená, že nikdy nebudete muset ručně spouštět hlavní proces Grunt! Než zahájíte změny, stačí inicializovat úkol gruntových hodinek a můžete na něj zapomenout.
Slova: Jamie Shields
Jamie Shields je zadní vývojář v agentuře pro digitální marketing Stickyeyes.
Takhle? Přečti si tohle!
- Grunt vs Gulp: Který nástroj pro sestavení JavaScriptu byste si měli vybrat?
- 8 způsobů, jak vylepšit vaše nastavení Grunt
- Nejlepší bezplatná témata WordPress
