Conţinut
Alergătorii de sarcini JavaScript, cum ar fi Grunt, au devenit extrem de populari printre dezvoltatorii front-end. Acest lucru se datorează faptului că ajută la realizarea singurului lucru pe care cu toții dorim să-l facem în slujbele noastre - economisiți timp!
Dar cu mai mult de 5.000 (și mai multe) plugin-uri Grunt disponibile acum, poate fi greu pentru dezvoltatori să găsească acele „diamante în grosime”. Am aruncat o privire înapoi asupra timpului nostru blocat în Grunt pentru a găsi rețeta perfectă a pluginurilor Grunt pe care ar trebui să le folosiți.
01. Uglify
Fiecare dezvoltator front-end care își merită puterea știe despre avantajele reducerii fișierelor JavaScript și exact acest lucru face acest plugin. Aceasta este popularitatea sa, este de fapt inclusă în Ghidul de început Grunt. În ciuda numelui, acest plugin poate fi folosit și pentru a înfrumuseța codul JavaScript - deși acest lucru nu este deosebit de util pentru utilizarea în producție.
02. Sass
S-ar putea să existe o dezbatere cu privire la pre-procesorul CSS care într-adevăr stăpânește, dar aici, la Stickyeyes, ne-am stabilit mai degrabă pe Sass decât pe principalul său rival, Less. Acest plugin ne permite să scriem fișierele noastre Sass și să le compilăm automat în CSS. Meritele utilizării unui pre-procesor CSS justifică un articol separat în sine, dar este sigur să spunem că, dacă nu îl utilizați deja, întârziați foarte mult la petrecere!
03. CSSMin
Acest plugin este echivalentul CSS al Uglify. Pur și simplu primește orice fișier CSS specificat și le minimizează. Desigur, dacă veți utiliza acest lucru împreună cu pluginul Sass, atunci trebuie să vă asigurați că această sarcină este executată după sarcina Sass.
Există o mulțime de alternative la CSSMin care pot reduce, de asemenea, dimensiunea fișierelor CSS folosind tehnici ușor diferite; CSS nano, CSS wring, CSS shrink etc. Citiți acest benchmark la îndemână dacă vă interesează acel tip de lucruri.
04. Concat
După cum sugerează și numele, acest plugin pur și simplu preia mai multe fișiere și le concatenează într-unul singur. Ca și în cazul codului de minificare, concatenarea fișierelor este, de asemenea, o bună practică veche pentru reducerea timpilor de încărcare a paginii.
Concatenarea fișierelor trebuie folosită întotdeauna în producție atât pentru JavaScript, cât și pentru CSS. Aceasta este de obicei ultima sarcină care trebuie executată - după sarcina de pre-procesare CSS și sarcina de minimizare. Este ușor să spuneți acestui plugin să concateneze toate fișierele dintr-un anumit director, dar aveți grijă la ordinea în care fișierele vor fi concatenate - poate fi necesar să dați o anumită comandă sau să denumiți fișierele, astfel încât acestea să fie întotdeauna concatenate în ordinea dorită .
05. ImageMin
În același sens ca CSSMin și Uglify, ImageMin abordează o altă problemă veche de încărcare a paginii - dimensiunea fișierului imagine. „Minificarea” imaginii este de obicei un prim port de apel pentru optimizare, astfel încât acest plugin este esențial pentru a reduce dimensiunea totală a fișierului paginii cât mai mult posibil.
Dacă lucrați cu JPG, PNG, GIF sau SVG (un format de imagine vector din ce în ce mai popular), acest plugin va avea ca rezultat reduceri fără pierderi ale dimensiunii fișierului imaginilor dvs., fără a fi nevoie să ridicați un deget. Dacă aveți o mulțime de imagini în proiectul dvs., este o idee bună să rulați această sarcină numai atunci când vă îndreptați spre producție, mai degrabă decât să rulați această sarcină pe un eveniment de ceas (a se vedea punctul următor).
06. Ceas
Acest plugin nu afectează front-end-ul site-ului dvs., dar este extrem de util în crearea unui proces Grunt eficient. Watch pur și simplu urmărește orice directoare pe care le specificați și, odată ce ceva se schimbă, va declanșa automat anumite sarcini Grunt.
Deci, puteți configura o condiție de vizionare în directorul dvs. 'js' pentru a vă rula sarcinile JavaScript și o alta în directorul dvs. 'css' pentru a vă rula sarcinile CSS. Acest lucru înseamnă că nu va trebui niciodată să rulați manual procesul principal Grunt! Inițializați sarcina de vizionare înainte de a începe modificări și puteți uita că este chiar acolo.
Cuvinte: Jamie Shields
Jamie Shields este dezvoltator back-end la agenția de marketing digital Stickyeyes.
Ca aceasta? Citeste acest!
- Grunt vs Gulp: Ce instrument de construire JavaScript ar trebui să alegeți?
- 8 moduri de a vă îmbunătăți configurarea Grunt
- Cele mai bune teme WordPress gratuite
