6 vigtige Grunt-plugins, du skal bruge

Jord

Giv din Grunt mere grunt med disse fantastiske plugins

JavaScript-opgaveløbere som f.eks Jord er blevet ekstremt populære blandt front-end-udviklere. Dette skyldes, at de hjælper med at gøre den ene ting, som vi alle sammen vil gøre i vores job - spar tid!



spil hvor du trækker linjer for at flytte en bold

Men med mere end 5.000 (og tællende) Grunt-plugins, der nu er tilgængelige, kan det være svært for udviklere at finde disse 'diamanter i ru'. Vi har kigget tilbage på vores tid, hvor vi sidder fast i Grunt for at finde den perfekte opskrift på Grunt-plugins, som du skal bruge.



01. Uglify

Hver front-end-udvikler, der er værd for deres salt, ved om fordelene ved at minificere JavaScript-filer, og det er præcis, hvad dette plugin gør. Sådan er dens popularitet, det er faktisk inkluderet i Vejledning til Grunt Kom godt i gang . På trods af navnet kan dette plugin også bruges til at forskønne din JavaScript-kode - selvom det ikke er særlig nyttigt til produktionsbrug.

02. Sass

Der kan være nogen debat om, hvilken CSS-forprocessor, der virkelig hersker, men her på Stickyeyes , vi har afgjort på Sass snarere end dens vigtigste rival, Less. Dette plug-in gør det muligt for os at skrive vores Sass-filer og få dem automatisk kompileret til CSS. Fordelene ved at bruge en CSS-forprocessor berettiger til en separat artikel i sig selv, men det er sikkert at sige, at hvis du ikke allerede bruger en, er du meget sent til festen!



03. CSSMin

Dette plugin er CSS-ækvivalent med Uglify. Det får simpelthen alle specifikke CSS-filer og minimerer dem. Selvfølgelig, hvis du vil bruge dette sammen med Sass-pluginet, skal du sikre dig, at denne opgave køres efter Sass-opgaven.

Der er mange alternativer til CSSMin, som også kan reducere størrelsen på dine CSS-filer ved hjælp af lidt forskellige teknikker; CSS nano, CSS vridning, CSS skrumpe osv. Læs dette praktiske benchmark hvis du holder af den slags ting.

04. Concat

Som navnet antyder, tager dette plugin simpelthen flere filer og sammenkæder dem til en. Som med minifieringskode er sammenkædning af filer også en ældgammel bedste praksis for at reducere sidens indlæsningstid.



Fil sammenkædning skal altid bruges i produktion til både JavaScript og CSS. Dette er ofte den sidste opgave, der skal køres - efter CSS-forbehandlingsopgaven og minificeringsopgaven. Det er nemt bare at fortælle dette plugin at sammenkæde alle filerne i en bestemt mappe, men pas på den rækkefølge, som filerne sammenkædes - du skal muligvis give en bestemt rækkefølge eller navngive filerne, så de altid sammenkædes i den rækkefølge, du ønsker .

05. ImageMin

På samme måde som CSSMin og Uglify tackler ImageMin et andet ældgamle problem for sideindlæsning - billedfilstørrelse. Billedminifiering er normalt en første anløbshavn til optimering, så dette plugin er vigtigt for at reducere den samlede sidefilstørrelse ned så meget som muligt.

Hvis du arbejder med JPG, PNG, GIF eller SVG (et stadigt mere og mere populært vektorbillede format), vil dette plugin resultere i tabsfri reduktion i filstørrelsen på dine billeder uden at du behøver at løfte en finger. Hvis du har mange billeder i dit projekt, er det en god ide kun at køre denne opgave, når du skubber til produktion, snarere end at køre denne opgave på en urbegivenhed (se næste punkt).

06. Holde øje

Dette plugin påvirker faktisk ikke din websides frontend, men det er ekstremt nyttigt til at skabe en effektiv Grunt-proces. Watch holder ganske enkelt øje med de mapper, du angiver, og når noget ændres, vil det automatisk udløse visse Grunt-opgaver.

maxoak 50.000 mah powerbank

Så du kan oprette en overvågningstilstand i din 'js' -mappe til at køre dine JavaScript-opgaver, og en anden i din 'css' -mappe til at køre dine CSS-opgaver. Dette betyder, at du aldrig behøver at køre din vigtigste Grunt-proces manuelt! Initialiser bare grunt uropgaven, inden du begynder at foretage ændringer, og du kan glemme, at den er der.

Ord: Jamie Shields

Jamie Shields er en backend-udvikler hos digital marketingbureau Stickyeyes .

Sådan her? Læs dette!