6 alapvető Grunt bővítmény, amelyet használnia kell

Talaj

Adjon még nagyobb morgást Grunt-jének ezekkel a nagyszerű beépülő modulokkal

JavaScript feladat futók, mint pl Talaj rendkívül népszerűvé váltak a front-end fejlesztők körében. Ennek az az oka, hogy segítenek abban az egy dologban, amelyet mindannyian meg akarunk tenni a munkánk során - időt takaríthat meg!

De a már rendelkezésre álló több mint 5000 (és számítva) Grunt beépülő modul miatt a fejlesztők számára nehéz lehet megtalálni ezeket a „gyémántokat durván”. Visszapillantottunk arra az időre, amikor beleakadtunk a Gruntba, hogy megtaláljuk a Grunt pluginek tökéletes receptjét, amelyet használnia kell.

01. Elcsúfít

Minden front-end fejlesztő, aki megéri a sóját, ismeri a JavaScript fájlok tömörítésének előnyeit, és ez a plugin pontosan ezt teszi. Ilyen a népszerűsége, valójában benne van a Grunt Első lépések útmutató . A név ellenére ez a plugin a JavaScript kódjának szépítésére is használható - bár ez nem különösebben hasznos a gyártási célokra.

02. Sass

Lehet némi vita arról, hogy melyik CSS előfeldolgozó valóban uralja a roostot, de itt Stickyeyes , inkább a Sassra telepedtünk, mint fő riválisára, a Lessre. Ez a beépülő modul lehetővé teszi számunkra, hogy megírjuk a Sass fájljainkat, és automatikusan lefordítsuk őket a CSS-be. A CSS előfeldolgozó használatának érdeme önmagában külön cikket indokol, de nyugodtan kijelenthetjük, hogy ha még nem használ egyet, akkor nagyon elkésik a buliból!

03. CSSMin

Ez a bővítmény az Uglify CSS-megfelelője. Egyszerűen megkapja a megadott CSS fájlokat és kicsinyíti azokat. Természetesen, ha ezt a Sass beépülő modullal együtt fogja használni, akkor meg kell győződnie arról, hogy ez a feladat a Sass feladat után fut.

Számos alternatíva létezik a CSSMin-re, amelyek kissé eltérő technikák alkalmazásával csökkenthetik a CSS-fájlok méretét; CSS nano, CSS csavarás, CSS zsugorodás stb. Olvassa el ezt a praktikus referenciaértéket ha ilyen típusú dolgokkal foglalkozik.

04. Concat

Ahogy a neve is sugallja, ez a bővítmény egyszerűen több fájlt vesz fel és összefűzi őket egybe. A kódok tömörítéséhez hasonlóan a fájlok összefűzése is egy ősrégi legjobb gyakorlat az oldal betöltési idejének csökkentésére.

A fájlok összefűzését mindig a JavaScript és a CSS számára kell használni. Általában ez az utolsó futtatott feladat - a CSS előfeldolgozási és a tömörítési feladat után. Könnyű csak azt mondani ennek a bővítménynek, hogy összefűzze az összes fájlt egy adott könyvtárban, de vigyázzon a fájlok összefűzésének sorrendjére - lehet, hogy meg kell adnia egy adott sorrendet vagy meg kell neveznie a fájlokat, hogy mindig a kívánt sorrendben legyenek összefűzve. .

05. ImageMin

A CSSMin és az Uglify programhoz hasonlóan az ImageMin egy másik, az oldal betöltésével kapcsolatos régi problémát is kezel - a képfájl méretét. A képminimalizálás általában az optimalizálás első hívása, ezért ez a bővítmény elengedhetetlen az oldal teljes fájlméretének lehető legkisebb csökkentéséhez.

Ha JPG-, PNG-, GIF- vagy SVG-fájlokkal (egyre népszerűbb vektoros képformátum) dolgozik, ez a bővítmény veszteségmentesen csökkenti a képek fájlméretét, anélkül, hogy ujját kellene emelnie. Ha sok kép van a projektben, célszerű ezt a feladatot csak akkor futtatni, amikor a gyártásra törekszik, ahelyett, hogy ezt a feladatot egy figyelő eseményen futtatná (lásd a következő pontot).

06. Néz

Ez a bővítmény valójában nem befolyásolja a webhely kezelőfelületét, de rendkívül hasznos egy hatékony Grunt-folyamat létrehozásában. A Watch egyszerűen szemmel tartja az Ön által megadott könyvtárakat, és ha valami megváltozik, az automatikusan elindít bizonyos Grunt feladatokat.

Tehát beállíthat egy figyelési feltételt a 'js' könyvtárban a JavaScript-feladatok futtatásához, és egy másikat a 'css' könyvtárban a CSS-feladatok futtatásához. Ez azt jelenti, hogy soha nem kell manuálisan futtatnia a fő Grunt folyamatot! Csak inicializálja a morgásóra feladatot, mielőtt elkezdené a változtatásokat, és elfelejtheti, hogy még ott is van.

Szavak: Jamie Shields

Jamie Shields a digitális marketing ügynökség háttérfejlesztője Stickyeyes .

Mint ez? Olvasd ezt el!