Innehåll
JavaScript-aktivitetslöpare som Grunt har blivit extremt populära bland front-end-utvecklare. Detta beror på att de hjälper till att göra det som vi alla vill göra i våra jobb - spara tid!
Men med mer än 5 000 (och räknande) Grunt-plugins som nu finns tillgängliga kan det vara svårt för utvecklare att hitta dessa ”diamanter i grovt”. Vi har tittat tillbaka på vår tid att fastna i Grunt för att hitta det perfekta receptet på Grunt-plugins som du borde använda.
01. Förglöm
Varje front-end-utvecklare som är värt sitt salt vet om fördelarna med att minifiera JavaScript-filer, och det är precis vad detta plugin gör. Sådan är dess popularitet, den ingår faktiskt i Grunt Getting Started Guide. Trots namnet kan detta plugin också användas för att försköna din JavaScript-kod - även om det inte är särskilt användbart för produktionsanvändning.
02. Sass
Det kan finnas en viss debatt om vilken CSS-förprocessor som verkligen styr makten, men här på Stickyeyes har vi bestämt oss för Sass snarare än dess huvudrival, Less. Denna plug-in gör det möjligt för oss att skriva våra Sass-filer och få dem att sammanställas till CSS automatiskt. Fördelarna med att använda en CSS-förprocessor garanterar en separat artikel i sig, men det är säkert att säga att om du inte redan använder en så är du väldigt sen till festen!
03. CSSMin
Det här pluginet är CSS-ekvivalenten för Uglify. Det hämtar helt enkelt alla angivna CSS-filer och förminskar dem. Naturligtvis, om du ska använda detta i kombination med Sass-plugin måste du se till att denna uppgift körs efter Sass-uppgiften.
Det finns många alternativ till CSSMin som också kan minska storleken på dina CSS-filer med lite olika tekniker; CSS-nano, CSS-vridning, CSS-krympning etc. Läs detta praktiska riktmärke om du gillar den typen av saker.
04. Concat
Som namnet antyder tar detta plugin helt enkelt flera filer och sammanfogar dem till en. Som med minifieringskod är sammanfogning av filer också en gammal gammal metod för att minska sidläsningstiderna.
Sammankoppling av filer bör alltid användas i produktion för både JavaScript och CSS. Detta är ofta den sista uppgiften som ska köras - efter CSS-förbehandlingsuppgiften och minifieringsuppgiften. Det är lätt att bara berätta för detta plugin att sammanfoga alla filer i en viss katalog, men se upp för att filerna ska sammanfogas - du kan behöva ange en specifik ordning eller namnge filerna så att de alltid sammanfogas i den ordning du vill ha .
05. ImageMin
På samma sätt som CSSMin och Uglify, hanterar ImageMin ett annat gammalt problem för sidläsning - bildfilstorlek. Bildminifiering är vanligtvis en första anlöpshamn för optimering, så detta plugin är viktigt för att minska den totala sidfilsstorleken så mycket som möjligt.
Om du arbetar med JPG, PNG, GIF eller SVG (ett alltmer populärt vektorbildformat) kommer detta plugin att leda till förlustfria bildstorlekar på dina bilder utan att du behöver lyfta ett finger. Om du har många bilder i ditt projekt är det en bra idé att bara köra den här uppgiften när du drar till produktion, snarare än att köra den här uppgiften på en klockhändelse (se nästa punkt).
06. Titta
Detta plugin påverkar faktiskt inte din webbplats front-end, men det är extremt användbart för att skapa en effektiv Grunt-process. Watch håller helt enkelt ett öga på alla kataloger du anger, och när något ändras kommer det automatiskt att utlösa vissa Grunt-uppgifter.
Så du kan ställa in ett bevakningsvillkor i din 'js-katalog för att köra dina JavaScript-uppgifter och ett annat i din' css '-katalog för att köra dina CSS-uppgifter. Det betyder att du aldrig kommer att behöva köra din huvudgruntprocess manuellt! Initiera bara grunt watch-uppgiften innan du börjar göra ändringar och du kan glömma att den finns där.
Ord: Jamie Shields
Jamie Shields är en backend-utvecklare på den digitala marknadsföringsbyrån Stickyeyes.
Så här? Läs detta!
- Grunt vs Gulp: Vilket JavaScript-byggverktyg ska du välja?
- 8 sätt att förbättra din Grunt-inställning
- De bästa gratis WordPress-teman
