Sadržaj
Izvođači JavaScript zadataka poput Grunta postali su izuzetno popularni kod front-end programera. To je zato što pomažu u ostvarenju jedne stvari koju svi mi želimo raditi na svom poslu - uštedjeti vrijeme!
No s više od 5.000 (i računajući) dodataka za Grunt koji su sada dostupni, programerima može biti teško pronaći one 'grube dijamante'. Osvrnuli smo se na naše vrijeme zaglavljujući se u Gruntu i pronašli savršeni recept za Grunt dodatke koji biste trebali koristiti.
01. Ružno
Svaki front-end programer vrijedan soli zna o prednostima umanjivanja JavaScript datoteka, a upravo to čini ovaj dodatak. Takva je njegova popularnost, zapravo je uključen u Vodič za početak Grunta. Unatoč imenu, ovaj dodatak može se koristiti i za uljepšavanje vašeg JavaScript koda - iako to nije osobito korisno za produkcijsku upotrebu.
02. Sass
Možda postoje neke rasprave o tome koji CSS predprocesor stvarno vlada nadmoćnošću, ali ovdje smo se u Stickyeyesu odlučili za Sassa, a ne za njegovog glavnog suparnika, Lessa. Ovaj nam dodatak omogućuje pisanje Sass datoteka i automatsko kompajliranje u CSS. Zasluga korištenja CSS pretprocesora jamči zaseban članak za sebe, ali sigurno je reći da ako ga već ne koristite, jako kasnite na zabavu!
03. CSSMin
Ovaj dodatak je CSS ekvivalent Uglifyu. Jednostavno dobiva određene CSS datoteke i umanjuje ih. Naravno, ako ćete ovo koristiti zajedno s dodatkom Sass, tada morate osigurati da se ovaj zadatak pokrene nakon zadatka Sass.
Postoji puno alternativa CSSMinu koje također mogu smanjiti veličinu vaših CSS datoteka koristeći malo drugačije tehnike; CSS nano, CSS wring, CSS skupljanje itd. Pročitajte ovu praktičnu referentnu vrijednost ako se bavite tom vrstom stvari.
04. Concat
Kao što i samo ime govori, ovaj dodatak jednostavno uzima više datoteka i spaja ih u jednu. Kao i kod minificiranja koda, spajanje datoteka također je prastara najbolja praksa za smanjenje vremena učitavanja stranice.
Spajanje datoteka uvijek se treba koristiti u proizvodnji i za JavaScript i za CSS. To je obično posljednji izvršeni zadatak - nakon CSS zadatka predobrade i zadatka minifikacije. Lako je jednostavno reći ovom dodatku da spaja sve datoteke u određenom direktoriju, ali pripazite redoslijed da će se datoteke spojiti - možda ćete trebati dati određeni redoslijed ili dati datoteke datotekama tako da se uvijek spajaju željenim redoslijedom .
05. ImageMin
Na isti način kao i CSSMin i Uglify, ImageMin rješava još jedan prastari problem učitavanja stranice - veličinu slikovne datoteke. 'Minifikacija' slike obično je prvi poziv za optimizaciju, pa je ovaj dodatak neophodan da bi se ukupna veličina datoteke stranice smanjila što je više moguće.
Ako radite s JPG, PNG, GIF ili SVG (sve popularniji format vektorskih slika), ovaj će dodatak rezultirati smanjenjem veličine datoteke vaših slika bez gubitka prsta. Ako u projektu imate puno slika, bilo bi dobro pokrenuti ovaj zadatak samo kada se prebacujete na proizvodnju, a ne pokretati ovaj zadatak na događaju gledanja (pogledajte sljedeću točku).
06. Pazi
Ovaj dodatak zapravo ne utječe na vašu web stranicu, ali je izuzetno koristan u stvaranju učinkovitog Grunt procesa. Watch jednostavno pazi na sve direktorije koje navedete i kad se nešto promijeni, automatski će pokrenuti određene Grunt zadatke.
Tako možete postaviti jedan uvjet gledanja u direktoriju 'js' za pokretanje JavaScript zadataka, a drugi u direktoriju 'css' za pokretanje CSS zadataka. To znači da nikada nećete morati ručno pokretati svoj glavni Grunt postupak! Dovoljno je inicijalizirati zadatak promatranja gunđanja prije nego što započnete s promjenama i možete zaboraviti da je čak i tamo.
Riječi: Jamie Shields
Jamie Shields je back end programer u agenciji za digitalni marketing Stickyeyes.
Kao ovo? Pročitaj ovo!
- Grunt vs Gulp: Koji biste JavaScript alat za izradu trebali odabrati?
- 8 načina za poboljšanje vaše Grunt postavke
- Najbolje besplatne WordPress teme
