Innhold
JavaScript-oppgaveløpere som Grunt har blitt ekstremt populære blant front-end-utviklere. Dette er fordi de hjelper til med å gjøre den ene tingen som vi alle ønsker å gjøre i jobbene våre - spar tid!
Men med mer enn 5000 (og tellende) Grunt-plugins som nå er tilgjengelige, kan det være vanskelig for utviklere å finne disse diamantene i grovt. Vi har sett tilbake på vår tid å bli sittende fast i Grunt for å finne den perfekte oppskriften på Grunt-plugins du bør bruke.
01. Oppglød
Hver front-end-utvikler som er verdt sitt salt, vet om fordelene med å minifisere JavaScript-filer, og det er akkurat hva dette programtillegget gjør. Slik er populariteten, den er faktisk inkludert i Grunt Getting Started Guide. Til tross for navnet kan dette pluginet også brukes til å forskjønne JavaScript-koden din - selv om det ikke er spesielt nyttig for produksjonsbruk.
02. Sass
Det kan være en del debatt om hvilken CSS-forprosessor som faktisk styrer roost, men her på Stickyeyes har vi slått oss til Sass i stedet for hovedrivalen, Less. Denne plugin-modulen gjør det mulig for oss å skrive Sass-filene våre og få dem samlet til CSS automatisk. Fordelene med å bruke en CSS-forprosessor garanterer en egen artikkel i seg selv, men det er trygt å si at hvis du ikke bruker en allerede, er du veldig sen til festen!
03. CSSMin
Dette pluginet er CSS-ekvivalenten til Uglify. Det får ganske enkelt alle spesifiserte CSS-filer og minifiser dem. Hvis du skal bruke dette sammen med Sass-pluginet, må du selvfølgelig sørge for at denne oppgaven kjøres etter Sass-oppgaven.
Det er mange alternativer til CSSMin som også kan redusere størrelsen på CSS-filene dine ved hjelp av litt forskjellige teknikker; CSS nano, CSS vri, CSS krympe osv. Les dette nyttige referanseverdien hvis du er interessert i den typen ting.
04. Concat
Som navnet antyder, tar dette pluginet ganske enkelt flere filer og sammenkobler dem til en. Som med minifiseringskode, er sammenkobling av filer også en eldgamle god praksis for å redusere sidetid.
Sammenkobling av filer bør alltid brukes i produksjon for både JavaScript og CSS. Dette er vanligvis den siste oppgaven som skal kjøres - etter CSS-prosesseringsoppgaven og minifiseringsoppgaven. Det er enkelt å bare fortelle dette pluginet for å sammenkoble alle filene i en bestemt katalog, men pass på rekkefølgen at filene blir sammenkoblet - du må kanskje gi en bestemt rekkefølge eller gi navn til filene, slik at de alltid blir sammenkoblet i den rekkefølgen du vil ha .
05. ImageMin
På samme måte som CSSMin og Uglify, takler ImageMin et annet eldgammelt problem for sideinnlasting - bildestørrelse. Image 'minification' er vanligvis en første anløpshavn for optimalisering, så dette pluginet er viktig for å redusere den totale sidestørrelsen så mye som mulig.
Hvis du jobber med JPG, PNG, GIF eller SVG (et stadig mer populært vektorbildeformat), vil dette programtillegget resultere i tapsfri reduksjon i filstørrelsen på bildene dine, uten at du trenger å løfte en finger. Hvis du har mange bilder i prosjektet ditt, er det en god ide å bare kjøre denne oppgaven når du presser til produksjon, i stedet for å kjøre denne oppgaven på en urevent (se neste punkt).
06. Se
Dette pluginet påvirker faktisk ikke nettsidens front-end, men det er ekstremt nyttig for å skape en effektiv Grunt-prosess. Watch holder rett og slett et øye med katalogene du spesifiserer, og når noe endres, vil det automatisk utløse visse Grunt-oppgaver.
Så du kan sette opp en overvåkningstilstand i ’js’-katalogen din for å kjøre JavaScript-oppgavene dine, og en annen i’ css’-katalogen for å kjøre CSS-oppgavene dine. Dette betyr at du aldri trenger å kjøre Grunt-prosessen manuelt! Bare initialiser grunturoppgaven før du begynner å gjøre endringer, og du kan glemme at den er der.
Ord: Jamie Shields
Jamie Shields er en backend-utvikler hos det digitale markedsføringsbyrået Stickyeyes.
Som dette? Les dette!
- Grunt vs Gulp: Hvilket JavaScript-verktøy skal du velge?
- 8 måter å forbedre Grunt-oppsettet ditt
- De beste gratis WordPress-temaene
