Vsebina
Izvajalci opravil JavaScript, kot je Grunt, so postali izjemno priljubljeni pri front-end razvijalcih. To je zato, ker pomagajo narediti tisto, kar si vsi želimo pri svojem delu - prihranite čas!
A ker je zdaj na voljo več kot 5000 (in šteje) vtičnikov Grunt, lahko razvijalci težko najdejo tiste „diamante v grobem“. Ogledali smo se nazaj, ko smo se zataknili v Gruntu, da bi našli popoln recept za Gruntove vtičnike, ki bi jih morali uporabljati.
01. Ponižaj
Vsak čelni razvijalec, ki se splača, ve o prednostih pomanjševanja datotek JavaScript in točno to počne ta vtičnik. Takšna je njegova priljubljenost, pravzaprav je vključena v vodnik Grunt Getting Started Guide. Kljub imenu lahko ta vtičnik uporabite tudi za polepšanje kode JavaScript - čeprav to ni posebej uporabno za proizvodno uporabo.
02. Sass
Morda se nekaj razpravlja o tem, kateri predprocesor CSS resnično prevladuje, vendar smo se pri Stickyeyesu raje odločili za Sass kot za njegovega glavnega tekmeca, Less. Ta vtičnik nam omogoča pisanje datotek Sass in njihovo samodejno prevajanje v CSS. Zasluge uporabe predprocesorja CSS že samo po sebi zahtevajo ločen članek, vendar lahko varno rečemo, da če ga že ne uporabljate, ste zelo pozni na zabavo!
03. CSSMin
Ta vtičnik je CSS, enakovreden Uglify. Preprosto dobi vse določene datoteke CSS in jih pomanjša. Seveda, če boste to uporabljali skupaj z vtičnikom Sass, morate zagotoviti, da se to opravilo izvaja po opravilu Sass.
Obstaja veliko možnosti za CSSMin, ki lahko z nekoliko drugačnimi tehnikami tudi zmanjšajo velikost datotek CSS; CSS nano, ožemanje CSS, skrčenje CSS itd. Preberite to priročno merilo, če se ukvarjate s to vrsto stvari.
04. Concat
Kot že ime pove, ta vtičnik preprosto vzame več datotek in jih združi v eno. Tako kot pri pomanjševanju kode je tudi združevanje datotek starodavna najboljša praksa za zmanjšanje časa nalaganja strani.
Združevanje datotek je treba vedno uporabljati pri izdelavi JavaScript in CSS. To je običajno zadnja naloga, ki jo je treba zagnati - po nalogi predobdelave CSS in nalogi za pomanjšanje. Enostavno lahko temu vtičniku preprosto povežete, da združi vse datoteke v določenem imeniku, vendar bodite pozorni na vrstni red združevanja datotek - morda boste morali dati določen vrstni red ali datoteke poimenovati, da bodo vedno združene v želenem vrstnem redu. .
05. ImageMin
Podobno kot CSSMin in Uglify se ImageMin loti še ene starostne težave pri nalaganju strani - velikosti slikovne datoteke. 'Minifikacija' slike je ponavadi prvo pristanišče za optimizacijo, zato je ta vtičnik bistven za čim večje zmanjšanje celotne velikosti datoteke.
Če delate z JPG, PNG, GIF ali SVG (vedno bolj priljubljena oblika vektorskih slik), bo ta vtičnik omogočil zmanjšanje velikosti datotek vaših slik brez izgub, ne da bi morali prstom dvigniti prst. Če imate v projektu veliko slik, je dobro, da to nalogo zaženete samo, ko se preusmerjate v produkcijo, namesto da bi to nalogo izvajali na dogodku ure (glejte naslednjo točko).
06. Pazi
Ta vtičnik dejansko ne vpliva na vašo spletno stran, vendar je zelo koristen pri ustvarjanju učinkovitega procesa Grunt. Watch preprosto spremlja vse imenike, ki jih določite, in ko se nekaj spremeni, bo samodejno sprožil določena Gruntova opravila.
Tako lahko nastavite en pogoj za gledanje v imeniku 'js' za zagon opravil JavaScript in drugega v imeniku 'css' za izvajanje nalog CSS. To pomeni, da vam nikoli ne bo treba ročno zagnati glavnega postopka Grunt! Preprosto inicializirajte nalogo gledanja grunt, preden začnete spreminjati, in lahko pozabite, da je sploh tam.
Besede: Jamie Shields
Jamie Shields je zadnji razvijalec agencije za digitalno trženje Stickyeyes.
Všečkaj to? Preberi to!
- Grunt vs Gulp: Katero orodje za izdelavo JavaScript bi morali izbrati?
- 8 načinov za izboljšanje nastavitve Grunta
- Najboljše brezplačne teme WordPress
