Tartalom
A JavaScript feladatfuttatók, mint például a Grunt, 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 mivel már elérhető több mint 5000 (és számolva) Grunt bővítmény, a fejlesztők számára nehéz lehet megtalálni ezeket a „gyémántokat durván”. Visszapillantottunk arra az időre, amikor beszorultunk a Gruntba, hogy megtaláljuk a Grunt pluginek tökéletes receptjét, amelyet használnia kell.
01. Uglify
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 a Grunt Getting Started Guide-ban található. A név ellenére ez a bővítmény a JavaScript-kódjának szépítésére is használható - bár ez nem különösebben hasznos 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, a Stickyeyes-nél, inkább a Sassra telepedett le, mint fő riválisára, 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 mondhatjuk, hogy ha már 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ú dolgokra vágyik.
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. Ez általában az utolsó futtatott feladat - a CSS előfeldolgozási és minifikációs 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 adott sorrendet kell megadnia 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 ősrégi problémát is megold az oldal betöltésével - a képfájl méretével. 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, akkor 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, akkor 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ézd
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 nézé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 nézési feladatot, mielőtt megkezdi a módosításokat, és elfelejtheti, hogy még ott is van.
Szavak: Jamie Shields
Jamie Shields a Stickyeyes digitális marketing ügynökség háttérfejlesztője.
Mint ez? Olvasd ezt el!
- Grunt vs Gulp: Melyik JavaScript-összeállító eszközt válassza?
- 8 módszer a Grunt-beállítások javítására
- A legjobb ingyenes WordPress témák
