6 välttämätöntä Grunt-laajennusta, joita sinun pitäisi käyttää

Maa

Anna Gruntillesi enemmän murinaa näillä upeilla laajennuksilla

JavaScript-tehtävän juoksijat, kuten Maa on tullut erittäin suosittu 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 laskenta) Grunt-laajennusta, kehittäjien voi olla vaikea löytää näitä 'timantteja epätasaisina'. Olemme katsoneet taaksepäin aikamme jumissa Gruntiin löytääksesi 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 aloitusopas . 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 jonkin verran keskustelua siitä, mikä CSS-esiprosessori todella hallitsee roostia, mutta täällä Tahmeat silmät , olemme asettuneet Sassin sijasta sen tärkeimmän kilpailijan Lessin sijasta. Tämän laajennuksen avulla voimme kirjoittaa Sass-tiedostomme ja kääntää ne automaattisesti CSS: ään. CSS-esiprosessorin käytön ansioista on itsessään 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.

millaiseen paperiin julisteita painetaan

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 vie yksinkertaisesti 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. Tämän laajennuksen on helppo vain liittää kaikki tietyssä hakemistossa olevat tiedostot, 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, jotta sivutiedoston kokoa voidaan pienentää mahdollisimman paljon.

Jos työskentelet JPG: n, PNG: n, GIF: n tai SVG: n (yhä suositumman vektorikuvan muoto) kanssa, tämä laajennus tuottaa häviöttömän pienennyksen kuviesi tiedostokokoon 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. Katsella

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äärittelemiäsi hakemistoja, ja kun jokin muutos käynnistää tietyt Grunt-tehtävät.

Joten voit asettaa yhden katselusehdon 'js' -hakemistoon suorittamaan JavaScript-tehtäviäsi ja toisen 'css' -hakemistoon suorittamaan CSS-tehtävät. Tämä tarkoittaa, että sinun ei tarvitse koskaan suorittaa Grunt-pääprosessia manuaalisesti! Alusta vain murrontarkkailutehtävä ennen muutosten tekemistä ja voit unohtaa, että se on sielläkin.

Sanat: Jamie Shields

Jamie Shields on digitaalisen markkinointitoimiston taustakehittäjä Tahmeat silmät .

Kuten tämä? Lue tämä!

paras kohta ja ampua elokuvakamera