Obsah
Bežci úloh v jazyku JavaScript, ako napríklad Grunt, sa stali mimoriadne obľúbenými medzi front-endovými vývojármi. Je to tak preto, lebo pomáhajú pri práci robiť jednu vec, ktorú všetci chceme robiť - šetriť čas!
Ale keďže je v súčasnosti k dispozícii viac ako 5 000 (a stále sa počítacích) doplnkov Grunt, pre vývojárov môže byť ťažké nájsť tieto „surové diamanty“. Pozreli sme sa späť na čas, ktorý sme uviazli v spoločnosti Grunt, aby sme našli perfektný recept doplnkov Grunt, ktoré by ste mali používať.
01. Uglify
Každý front-endový vývojár, ktorý si stojí za svojou soľou, vie o výhodách minifikácie súborov JavaScript, a to je presne to, čo tento doplnok robí. Taká je jeho popularita, ktorá je v skutočnosti obsiahnutá v príručke Začíname s Gruntom. Napriek uvedenému názvu je možné tento doplnok použiť aj na skrášlenie kódu JavaScript - aj keď to nie je obzvlášť užitočné pri produkčnom použití.
02. Sass
Možno sa bude viesť debata o tom, ktorý predspracovateľ CSS skutočne vládne hradom, ale tu v Stickyeyes sme sa rozhodli skôr pre Sass ako pre jeho hlavného rivala Lessa. Tento doplnok nám umožňuje písať naše súbory Sass a nechať ich automaticky kompilovať do CSS. Výhodou použitia predspracovania CSS je samostatný článok, je však možné povedať, že ak už žiadny nepoužívate, ste na párty neskoro!
03. CSSMin
Tento doplnok je ekvivalentom CSS k Uglify. Jednoducho dostane všetky špecifikované súbory CSS a minifikuje ich. Ak to samozrejme budete používať v spojení s doplnkom Sass, musíte sa ubezpečiť, že sa táto úloha spustí po úlohe Sass.
Existuje veľa alternatív k CSSMin, ktoré tiež môžu zmenšiť veľkosť vašich súborov CSS pomocou mierne odlišných techník; CSS nano, CSS vyžmýkanie, zmenšovanie CSS atď. Ak máte záujem o tento typ vecí, prečítajte si tento praktický test.
04. Concat
Ako už názov napovedá, tento doplnok jednoducho vezme viac súborov a spojí ich do jedného. Rovnako ako v prípade kódu na minimalizáciu je zreťazenie súborov tiež osvedčeným postupom na skrátenie času načítania stránky.
Pri produkcii by sa pri výrobe JavaScriptu a CSS malo vždy použiť zreťazenie súboru. Toto je zvyčajne posledná úloha, ktorá sa má spustiť - po úlohe predspracovania CSS a minifikácii. Je ľahké jednoducho povedať tomuto doplnku, aby spojil všetky súbory v konkrétnom adresári, ale dajte si pozor na poradie, v ktorom budú súbory zreťazené - možno budete musieť dať konkrétny príkaz alebo pomenovať súbory, aby boli vždy spojené v poradí, ktoré chcete .
05. ImageMin
Rovnako ako CSSMin a Uglify, ImageMin rieši ďalší odveký problém pri načítaní stránky - veľkosť obrazového súboru. „Minifikácia“ obrázka je zvyčajne prvý výzva na optimalizáciu, takže tento doplnok je nevyhnutný na čo najväčšie zníženie celkovej veľkosti súboru stránky.
Ak pracujete s formátmi JPG, PNG, GIF alebo SVG (čoraz populárnejší formát vektorových obrázkov), výsledkom tohto doplnku bude bezstratové zmenšenie veľkosti súboru vašich obrázkov, bez toho aby ste museli zdvíhať prst. Ak máte vo svojom projekte veľa obrázkov, je dobré túto úlohu spustiť, až keď tlačíte do výroby, namiesto spustenia tejto úlohy na hodinkách (pozri nasledujúci bod).
06. Sledujte
Tento doplnok v skutočnosti neovplyvňuje rozhranie vašej webovej stránky, je však mimoriadne užitočný pri vytváraní efektívneho procesu Grunt. Hodinky jednoducho sledujú všetky adresáre, ktoré určíte, a keď sa niečo zmení, automaticky spustia určité úlohy Grunt.
Môžete teda nastaviť jednu podmienku pozerania v adresári „js“ na vykonávanie úloh v jazyku JavaScript a druhú v adresári „css“ na vykonávanie úloh v CSS. To znamená, že nikdy nebudete musieť manuálne spustiť hlavný proces Grunt! Pred vykonaním zmien stačí inicializovať úlohu gruntových hodiniek a môžete zabudnúť, že už existuje.
Slová: Jamie Shields
Jamie Shields je back-end vývojár v agentúre pre digitálny marketing Stickyeyes.
Páči sa ti to? Prečítaj toto!
- Grunt vs Gulp: Aký nástroj na zostavenie JavaScriptu by ste si mali zvoliť?
- 8 spôsobov, ako vylepšiť vaše nastavenie Grunt
- Najlepšie bezplatné témy WordPress
