Efni.
JavaScript verkefnahlauparar eins og Grunt hafa orðið mjög vinsælir hjá forritara. Þetta er vegna þess að þeir hjálpa til við að gera það eina sem við öll viljum gera í störfum okkar - spara tíma!
En með meira en 5.000 (og telja) Grunt viðbætur sem nú eru fáanlegar getur verið erfitt fyrir verktaki að finna demanta þeirra í grófum dráttum. Við höfum litið til baka á þeim tíma sem við lentum í Grunt til að finna hina fullkomnu uppskrift af Grunt viðbótum sem þú ættir að nota.
01. Gleypa
Sérhver forritari sem er virði fyrir saltið sitt veit um kosti þess að minify JavaScript skrár, og það er nákvæmlega það sem þessi viðbót gerir. Slíkar eru vinsældir þess, það er í raun innifalið í handbók Grunt Getting Started. Þrátt fyrir nafnið er einnig hægt að nota þessa viðbót við að fegra JavaScript kóðann þinn - þó það sé ekki sérstaklega gagnlegt til framleiðslu.
02. Sass
Það kann að vera nokkur umræða um hvaða CSS forvinnsluvél raunverulega ræður ríkjum, en hér á Stickyeyes höfum við sætt okkur við Sass frekar en helsta keppinaut sinn, Less. Þessi viðbót gerir okkur kleift að skrifa Sass skrárnar okkar og láta safna þeim sjálfkrafa í CSS. Kosturinn við að nota CSS forvinnsluvél gefur tilefni til sérstakrar greinar í sjálfu sér, en það er óhætt að segja að ef þú ert ekki að nota einn þegar ertu mjög seinn í partýið!
03. CSSMin
Þessi viðbót er CSS jafngildi Uglify. Það fær einfaldlega einhverjar tilgreindar CSS skrár og minnkar þær. Auðvitað, ef þú ætlar að nota þetta í sambandi við Sass viðbótina, þá þarftu að tryggja að þetta verkefni sé keyrt eftir Sass verkefnið.
Það eru fullt af valkostum við CSSMin sem geta einnig dregið úr stærð CSS skjalanna þinna með aðeins mismunandi aðferðum; CSS nano, CSS wring, CSS skreppa o.s.frv. Lestu þetta handhæga viðmið ef þú ert í slíku efni.
04. Concat
Eins og nafnið gefur til kynna tekur þetta tappi einfaldlega margar skrár og sameinar þær í eina. Eins og með smækkunarkóða, þá eru samtengdar skrár ævafornar bestu venjur til að draga úr hlaða tíma.
Samræming skjala ætti alltaf að nota í framleiðslu bæði fyrir JavaScript og CSS. Þetta er venjulega síðasta verkefnið sem er hlaupið - eftir CSS forvinnsluverkefni og smækkunarverkefni. Það er auðvelt að segja bara við þetta tappi að sameina allar skrár í tiltekinni möppu, en varast röðina sem skjölin verða tengd saman - þú gætir þurft að gefa upp ákveðna pöntun eða nefnt skrárnar svo þær séu alltaf samlagðar í þeirri röð sem þú vilt .
05. ImageMin
Í sama streng og CSSMin og Uglify, tekur ImageMin á við annað ævafornt vandamál varðandi síðuálag - stærð myndar. Myndin ‘minification’ er venjulega fyrsti viðkomustaður til að hagræða og því er þetta tappi nauðsynlegt til að draga úr heildarstærð blaðsíðunnar eins mikið og mögulegt er.
Ef þú ert að vinna með JPG, PNG, GIF eða SVG (sífellt vinsælli myndmyndasnið) mun þessi viðbót bæta við taplausa minnkun á skráarstærð myndanna þinna án þess að þú þurfir að lyfta fingri. Ef þú ert með mikið af myndum í verkefninu þínu er góð hugmynd að keyra þetta verkefni aðeins þegar þú ert að ýta undir framleiðslu, frekar en að keyra þetta verkefni á áhorfandi atburði (sjá næsta lið).
06. Fylgstu með
Þessi tappi hefur í raun ekki áhrif á framhlið vefsíðu þinnar, en hún er afar gagnleg til að búa til skilvirkt Grunt ferli. Horfa fylgist einfaldlega með öllum skráasöfnum sem þú tilgreinir og þegar eitthvað breytist mun það sjálfkrafa kveikja á ákveðnum verkefnum Grunt.
Svo þú gætir sett upp eitt áhorfsskilyrði í ‘js’ skránni þinni til að keyra JavaScript verkefnin þín og annað í ‘css’ skránni til að keyra CSS verkefnin þín. Þetta þýðir að þú þarft aldrei að keyra aðal Grunt ferlið þitt! Byrjaðu bara á nölduráhorfsverkefninu áður en þú byrjar að gera breytingar og þú getur gleymt því að það er jafnvel þar.
Orð: Jamie Shields
Jamie Shields er bakendahönnuður hjá stafrænu markaðsstofunni Stickyeyes.
Svona? Lestu þetta!
- Grunt vs Gulp: Hvaða JavaScript smíðaverkfæri ættir þú að velja?
- 8 leiðir til að bæta uppsetningu Grunt
- Bestu ókeypis WordPress þemurnar
