6 olulist Grunti pistikprogrammi, mida peaksite kasutama

Maa

Andke oma Gruntile nende suurepäraste pistikprogrammidega rohkem nurinat

JavaScripti ülesannete jooksjad nagu Maa on esiotsa arendajate seas ülipopulaarseks muutunud. Seda seetõttu, et need aitavad teha ühte asja, mida me kõik oma töös teha tahame - säästa aega!

Kuid kuna nüüd on saadaval enam kui 5000 (ja loendavat) Grunti pistikprogrammi, võib arendajatel olla raske neid 'teemante ebatasasest' leida. Oleme heitnud pilgu meie ajale, mis on Gruntisse takerdunud, et leida Grunti pistikprogrammide ideaalne retsept, mida peaksite kasutama.

01. Uglify

Iga esiotsa arendaja, kes on oma soola väärt, teab JavaScripti failide minimeerimise eelistest ja just see plugin teebki. Selline on selle populaarsus, see on tegelikult ka Grunt Alustusjuhend . Hoolimata nimest saab seda pistikprogrammi kasutada ka teie JavaScripti koodi kaunistamiseks - ehkki see pole tootmise jaoks eriti kasulik.

02. Sass

Võib tekkida mõningane arutelu selle üle, milline CSS-i eeltöötleja tegelikult roostit valitseb, kuid siin Kleepuvad silmad , oleme leppinud pigem Sassiga kui selle peamise konkurendi Lessiga. See pistikprogramm võimaldab meil kirjutada oma Sassi failid ja lasta need automaatselt CSS-i kompileerida. CSS-i eelprotsessori kasutamise eelised nõuavad eraldi artiklit, kuid võib kindlalt öelda, et kui te seda juba ei kasuta, olete peole väga hilja!

03. CSSMin

See pistikprogramm on Uglify CSS-i ekvivalent. See saab lihtsalt kõik määratud CSS-failid ja minimeerib need. Muidugi, kui kavatsete seda kasutada koos Sassi pistikprogrammiga, peate tagama, et see ülesanne käivitatakse pärast Sassi ülesannet.

CSSMinil on palju alternatiive, mis võivad ka CSS-failide suurust veidi erineva tehnika abil vähendada; CSS nano, CSS väänamine, CSS kahanemine jne Lugege seda mugavat võrdlusalust kui sellist tüüpi asjadega tegelete.

04. Concat

Nagu nimigi ütleb, võtab see pistikprogramm lihtsalt mitu faili ja liidab need ühte. Nagu koodide minimeerimise puhul, on ka failide liitmine igivana parim tava lehe laadimisaja vähendamiseks.

Nii JavaScripti kui ka CSS-i tootmisel tuleks alati kasutada failide liitmist. Tavaliselt on see viimane käivitatav ülesanne - pärast CSS-i eeltöötluse ja minimeerimise ülesannet. Sellel pistikprogrammil on lihtne öelda, et kõik konkreetses kataloogis olevad failid liidetakse, kuid hoiduge failide liitmise järjekorrast - peate võib-olla andma kindla järjekorra või nimetama failid, et need oleksid alati liidetud soovitud järjekorras .

05. ImageMin

CSM-i ja Uglify-ga samamoodi tegeleb ImageMin lehe laadimisel veel ühe igivana probleemiga - pildifaili suurusega. Kujutise minimeerimine on tavaliselt esimene optimeerimiseks vajalik port, seega on see pistikprogramm oluline lehe kogu faili suuruse vähendamiseks nii palju kui võimalik.

Kui töötate JPG, PNG, GIF või SVG-ga (üha populaarsemaks muutuv vektorkujutise formaat), tagab see pistikprogramm piltide failisuuruse kadudeta vähendamise ilma, et peaksite sõrme tõstma. Kui teie projektis on palju pilte, on mõistlik käivitada see ülesanne ainult tootmise poole pöördudes, selle asemel, et seda ülesannet käitada vaatamisüritusel (vt järgmist punkti).

06. Vaata

See pistikprogramm ei mõjuta tegelikult teie veebisaidi esiosa, kuid on äärmiselt kasulik tõhusa Grunt-protsessi loomisel. Watch hoiab lihtsalt silma peal kõigil teie määratud kataloogidel ja kui midagi muutub, käivitab see automaatselt teatud Grunti ülesanded.

Nii võite oma JavaScripti ülesannete käitamiseks seadistada kataloogis 'js' ühe vaatamistingimuse ja CSS-i ülesannete käitamiseks teise kausta 'css'. See tähendab, et te ei pea kunagi oma peamist Grunt-protsessi käsitsi käitama! Initsialiseerige lihtsalt nurisemiskella ülesanne enne muudatuste tegemist ja võite unustada, et see on isegi olemas.

Sõnad: Jamie Shields

Jamie Shields on digitaalse turunduse agentuuri arendaja Kleepuvad silmad .

Nagu nii? Loe seda!