Sisältö
Gruntin kaltaiset JavaScript-tehtävän juoksijat ovat tulleet erittäin suosituiksi käyttöliittymäkehittäjien keskuudessa. Tämä johtuu siitä, että ne auttavat tekemään yhden asian, jonka me kaikki haluamme tehdä töissämme - säästää aikaa!
Mutta koska saatavilla on yli 5000 (ja laskee) Grunt-laajennusta, kehittäjien voi olla vaikea löytää näitä timantteja epätasaisina. Olemme katsoneet taaksepäin aikaa, joka on juuttunut Gruntiin löytääksemme täydellisen reseptin Grunt-laajennuksista, joita sinun pitäisi käyttää.
01. Uglify
Jokainen suolan arvoinen käyttöliittymäkehittäjä tietää JavaScript-tiedostojen minimoinnin eduista, ja juuri tämä laajennus tekee. Tällainen on sen suosio, se sisältyy itse asiassa Gruntin aloitusoppaaseen. Nimestä huolimatta tätä laajennusta voidaan käyttää myös JavaScript-koodisi kaunistamiseen - vaikka se ei ole erityisen hyödyllinen tuotantokäyttöön.
02. Sass
Saattaa olla keskustelua siitä, mikä CSS-esiprosessori todella hallitsee roostia, mutta täällä Stickyeyesissä olemme asettuneet Sassille sen tärkeimmän kilpailijan Lessin sijaan. Tämän laajennuksen avulla voimme kirjoittaa Sass-tiedostomme ja kääntää ne automaattisesti CSS: ään. CSS-esiprosessorin käytön ansioista itsessään on erillinen artikkeli, mutta on turvallista sanoa, että jos et käytä sitä jo, olet erittäin myöhässä juhliin!
03. CSSMin
Tämä laajennus on Uglifyn CSS-vastine. Se yksinkertaisesti saa kaikki määritetyt CSS-tiedostot ja minimoi ne. Tietenkin, jos aiot käyttää tätä yhdessä Sass-laajennuksen kanssa, sinun on varmistettava, että tämä tehtävä suoritetaan Sass-tehtävän jälkeen.
CSSMinille on paljon vaihtoehtoja, jotka voivat myös pienentää CSS-tiedostojesi kokoa hieman eri tekniikoilla; CSS-nano, CSS-vääntö, CSS-kutistuminen jne. Lue tämä kätevä vertailuarvo, jos olet kiinnostunut tällaisista asioista.
04. Concat
Kuten nimestä voi päätellä, tämä laajennus yksinkertaisesti vie useita tiedostoja ja yhdistää ne yhdeksi. Kuten koodin pienentämisessä, tiedostojen liittäminen on myös ikivanha paras käytäntö sivun latausaikojen lyhentämiseksi.
Tiedostojen ketjutusta tulisi aina käyttää sekä JavaScriptin että CSS: n tuotannossa. Tämä on yleensä viimeinen suoritettava tehtävä CSS-esikäsittelytehtävän ja pienentämistehtävän jälkeen. On helppoa vain kertoa tälle liitännäiselle ketjuttaa kaikki tiedostot tietyssä hakemistossa, mutta ole varovainen tiedostojen ketjutuksen järjestyksessä - saatat joutua antamaan tietyn järjestyksen tai nimeämään tiedostot, jotta ne liitetään aina haluamaasi järjestykseen .
05. ImageMin
Samoin kuin CSSMin ja Uglify, ImageMin ratkaisee toisen ikivanhan sivulatauksen ongelman - kuvatiedoston koon. Kuvan pienentäminen on yleensä ensimmäinen optimointiportti, joten tämä laajennus on välttämätön sivun kokonaistiedoston koon pienentämiseksi mahdollisimman paljon.
Jos työskentelet JPG: n, PNG: n, GIF: n tai SVG: n kanssa (yhä suositumpi vektorikuvamuoto), tämä laajennus pienentää häviöttömästi kuviesi tiedostokokoa ilman, että sinun tarvitsee nostaa sormea. Jos projektissasi on paljon kuvia, on hyvä ajatus suorittaa tämä tehtävä vain, kun siirryt tuotantoon, sen sijaan, että suoritat tämän tehtävän kellotapahtumassa (katso seuraava kohta).
06. Katso
Tämä laajennus ei itse asiassa vaikuta verkkosivustosi käyttöliittymään, mutta se on erittäin hyödyllinen tehokkaan Grunt-prosessin luomisessa. Watch yksinkertaisesti pitää silmällä kaikkia määrittämiäsi hakemistoja, ja kun jokin muutos käynnistää tietyt Grunt-tehtävät.
Joten voit asettaa yhden katseluolon 'js' -hakemistoon suorittamaan JavaScript-tehtäviäsi ja toisen 'css' -hakemistoon suorittamaan CSS-tehtävät. Tämä tarkoittaa, että sinun ei koskaan tarvitse suorittaa manuaalista Grunt-prosessia! Alusta vain murrontarkkailutehtävä ennen muutosten tekemistä ja voit unohtaa sen jopa siellä.
Sanat: Jamie Shields
Jamie Shields on backy-kehittäjä digitaalisessa markkinointitoimistossa Stickyeyes.
Kuten tämä? Lue tämä!
- Grunt vs Gulp: Mikä JavaScript-rakennustyökalu sinun pitäisi valita?
- 8 tapaa parantaa Grunt-asetuksiasi
- Parhaat ilmaiset WordPress-teemat
