Inhoud
JavaScript-taaklopers zoals Grunt zijn enorm populair geworden bij front-end-ontwikkelaars. Dit komt omdat ze helpen om het enige te doen dat we allemaal in ons werk willen doen - tijd besparen!
Maar met meer dan 5.000 (en nog steeds meer) Grunt-plug-ins die nu beschikbaar zijn, kan het voor ontwikkelaars moeilijk zijn om die ‘ruwe diamanten’ te vinden. We hebben teruggekeken op onze tijd die we in Grunt hebben gestoken om het perfecte recept van Grunt-plug-ins te vinden die je zou moeten gebruiken.
01. Lelijk maken
Elke front-end-ontwikkelaar die zijn zout waard is, kent de voordelen van het verkleinen van JavaScript-bestanden, en dat is precies wat deze plug-in doet. Dat is zo populair dat het eigenlijk is opgenomen in de Grunt Aan de slag-gids. Ondanks de naam kan deze plug-in ook worden gebruikt om uw JavaScript-code te verfraaien, hoewel dat niet erg handig is voor productiegebruik.
02. Sass
Er kan enige discussie zijn over welke CSS-pre-processor echt de baas is, maar hier bij Stickyeyes hebben we besloten om Sass te kiezen in plaats van zijn belangrijkste rivaal, Less. Met deze plug-in kunnen we onze Sass-bestanden schrijven en deze automatisch naar CSS laten compileren. De voordelen van het gebruik van een CSS-pre-processor rechtvaardigen een apart artikel op zich, maar het is veilig om te zeggen dat als je er nog geen gebruikt, je erg laat bent op het feest!
03. CSSMin
Deze plug-in is het CSS-equivalent van Uglify. Het haalt eenvoudigweg alle opgegeven CSS-bestanden op en verkleint ze. Als u dit in combinatie met de Sass-plug-in gaat gebruiken, moet u er natuurlijk voor zorgen dat deze taak wordt uitgevoerd na de Sass-taak.
Er zijn veel alternatieven voor CSSMin die ook de grootte van uw CSS-bestanden kunnen verkleinen met behulp van iets andere technieken; CSS nano, CSS wringen, CSS krimpen, enz. Lees deze handige benchmark als je van dat soort dingen houdt.
04. Concat
Zoals de naam al doet vermoeden, neemt deze plug-in eenvoudig meerdere bestanden en voegt ze samen tot één bestand. Net als bij het verkleinen van code, is het samenvoegen van bestanden ook een eeuwenoude best practice om de laadtijd van pagina's te verminderen.
Bestandsconcatenatie moet altijd worden gebruikt in de productie voor zowel JavaScript als CSS. Dit is gewoonlijk de laatste taak die moet worden uitgevoerd - na de CSS-voorverwerkingstaak en de minificatietaak. Het is gemakkelijk om deze plug-in gewoon te vertellen dat alle bestanden in een specifieke map moeten worden samengevoegd, maar let op de volgorde waarin de bestanden worden samengevoegd - mogelijk moet u een specifieke volgorde opgeven of de bestanden een naam geven, zodat ze altijd worden samengevoegd in de volgorde die u wilt .
05. ImageMin
In dezelfde geest als CSSMin en Uglify, pakt ImageMin een ander eeuwenoud probleem aan voor het laden van pagina's: de bestandsgrootte van afbeeldingen. Het verkleinen van afbeeldingen is meestal een eerste aanloophaven voor optimalisatie, dus deze plug-in is essentieel om de totale paginabestandsgrootte zo klein mogelijk te maken.
Als u werkt met JPG, PNG, GIF of SVG (een steeds populairder wordend vectorafbeeldingsformaat), zorgt deze plug-in voor verliesloze verkleining van de bestandsgrootte van uw afbeeldingen, zonder dat u een vinger hoeft uit te steken. Als je veel afbeeldingen in je project hebt, is het een goed idee om deze taak alleen uit te voeren als je naar productie gaat, in plaats van deze taak uit te voeren tijdens een bewakingsgebeurtenis (zie het volgende punt).
06. Kijk
Deze plug-in heeft eigenlijk geen invloed op de front-end van uw website, maar is buitengewoon handig bij het creëren van een efficiënt Grunt-proces. Watch houdt eenvoudig alle mappen in de gaten die u opgeeft, en zodra er iets verandert, worden automatisch bepaalde Grunt-taken geactiveerd.
U kunt dus een controlevoorwaarde instellen in uw ’js’ directory om uw JavaScript-taken uit te voeren, en een andere in uw ’css’ directory om uw CSS-taken uit te voeren. Dit betekent dat je je belangrijkste Grunt-proces nooit handmatig hoeft uit te voeren! Initialiseer gewoon de grunt watch-taak voordat u begint met het aanbrengen van wijzigingen en u kunt vergeten dat deze er zelfs is.
Woorden: Jamie Shields
Jamie Shields is een back-end-ontwikkelaar bij digitaal marketingbureau Stickyeyes.
Soortgelijk? Lees dit!
- Grunt vs Gulp: welke JavaScript-buildtool moet je kiezen?
- 8 manieren om je Grunt-opstelling te verbeteren
- De beste gratis WordPress-thema's
