![30 глупых вопросов Product Manager [Карьера в IT]](https://i.ytimg.com/vi/-WCQlXIL9M4/hqdefault.jpg)
Indhold
JavaScript-task-løbere som Grunt er blevet ekstremt populære hos front-end-udviklere. Dette skyldes, at de hjælper med at gøre den ene ting, som vi alle gerne vil gøre i vores job - spar tid!
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 det rå'. 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. Forglat
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, den er faktisk inkluderet i Grunt Getting Started Guide. 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 styrer roosten, men her på Stickyeyes har vi afgjort Sass snarere end dens hovedrival, 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 i sig selv en separat artikel, 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 formindsker dem. Selvfølgelig, hvis du vil bruge dette sammen med Sass-pluginet, skal du sørge for, 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 er interesseret i 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 normalt 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 stadig 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. Se
Dette plugin påvirker faktisk ikke din websides frontend, men det er ekstremt nyttigt til at skabe en effektiv Grunt-proces. Watch holder simpelthen øje med de mapper, du angiver, og når noget ændres, vil det automatisk udløse visse Grunt-opgaver.
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 grunturopgaven, inden du begynder at foretage ændringer, og du kan glemme, at den er der.
Ord: Jamie Shields
Jamie Shields er en backend-udvikler hos det digitale marketingbureau Stickyeyes.
Sådan her? Læs dette!
- Grunt vs Gulp: Hvilket JavaScript-byggeværktøj skal du vælge?
- 8 måder at forbedre din Grunt-opsætning på
- De bedste gratis WordPress-temaer
