Share
I første del av denne serien ga jeg en rask oversikt over Grunt. Jeg snakket også gjennom de ulike teknologiene som det krever for å kunne bruke. Etter det fikk jeg litt inn i Gruntfile og oppgavene i den.
Nå vil jeg snakke om hvordan du bruker Grunt, kan forbedre utviklingen din for både WordPress-temaer og plugins.
Min favoritt del om å bruke Grunt og npm er at når du setter opp prosjektet, er det selvdokumenterende prosjektets avhengigheter. Dette er flott for utviklingsgrupper og open source-prosjekter. Hvem vil ha å skrive dokumentasjon om hvordan du setter opp et arbeidsområde uansett, rett?
Først må du ha en package.json-fil i prosjektet. Du må ha prosjektets navn, versjon og beskrivelse satt opp. Vi kommer nærmere inn i dette i neste innlegg, men her er et eksempel:
"navn": "prosjektnavn",
"versjon": "1.0.0",
"beskrivelse": "Fantastisk prosjekt"
Når du har installert dette, når du installerer et grunt-plugin, trenger du bare å legge til --save-dev til slutt, og det vil legge til pluginet i package.json-filen din under devDependencies. For eksempel, hvis jeg ønsket å legge til grynt-contrib-klokke plugin til prosjektet mitt ville jeg kjøre følgende kommando:
npm installere grunt-contrib-watch - save-dev
Du vil se plugin lagt til din node_modules mappen, og det bør også føre til at filen pack.json ser slik ut:
"navn": "prosjektnavn",
"versjon": "1.0.0",
"beskrivelse": "Fantastisk prosjekt", "devDependencies":
"Grunt-Contrib-Watch": "~ 0.5.x"
Når du installerer andre Grunt-plugins og legger til --save-dev til slutt, vil du se dem lagt under devDependencies gjenstand.
Hvorfor er dette gunstig? Som jeg nevnte tidligere, er dette selv dokumentert dine prosjekter avhengigheter. Når du får alle pluginene dine installert og lagt til i package.json-filen, kan et annet lagmedlem eller en bidragsyter kjøre npm installasjon og de vil installere alt som trengs for prosjektet.
Du kan teste dette ut ganske enkelt ved å slette hele node_modules mappe og kjøring npm installasjon deg selv. Du vil se alt du installerer installert automatisk.
[notat] Du vil ønske å legge til node_modules mappe til din .gitignore filen, slik at du ikke oppblokkerer depotet ditt. [/ notat]
Jeg bruker mange lignende Grunt-plugins med hvert prosjekt, men den som jeg alltid installerer er den jeg refererte før, grunt-contrib-watch. Dette pluginet når det blir utført, vil se prosjektets filer og vil slå av eventuelle oppgaver du har angitt for den filen eller filtypen.
Et eksempel ville være for noen av JavaScript-filene dine. Når du gjør endringer i en av dem og lagrer den, kan du få Grunt til å kjøre en JSLint, concat og redusere oppgaven. Du kan også spesifisere en bestilling, så når man lykkes, blir den neste sparket av. Hvis man feiler, dreper det hele oppgavesekvensen.
CodeKit har en lignende funksjon, men den kjører alle oppgavene dine. For eksempel, hvis du gjør en endring til en SASS eller LESS-fil, slår den ikke bare opp de oppgavene, men slår også opp JavaScript-filoppgaver også. Grunt-watch-oppgaven gir deg mer kontroll over hvilke oppgaver som kjører når bestemte filer eller filtyper endres.
Sammen med Grunt-oppgavene for pluginene du installerer, kan du opprette dine egne tilpassede oppgaver. Mange ganger når jeg oppretter et prosjekt har jeg 3 oppgaver som jeg installerer, misligholde, oppsett, og bygge.
Standard oppgaven er oppgaven som skal kjøre med deg grynte fra kommandolinjen. Mange ganger vil jeg kartlegge min klokkeoppgave til standard. Du kan legge til hvilken oppgave du vil kjøre også.
Oppsettoppgaven som jeg konfigurerer gjør vanligvis de tingene som bare må skje for første gang for å stille opp prosjektoppsettet. Mange ganger bruker jeg Bower til å laste inn tredjepartsbiblioteker som Bootstrap, og trenger å trekke dem ned og kjøre en kopioppgave for å flytte noen filer inn i prosjektet mitt og deretter koble av en første kompilering av LESS og JavaScript-filene.
Byggoppgaven brukes til de tingene du må gjøre før du slipper eller distribuerer prosjektet. Jeg kjører alltid dette for å forsikre deg om at alt er sammenkoblet, minifisert og komprimert. Et godt eksempel er å kjøre grunt-contrib-imagemin for å optimalisere alle bildene i prosjektet ditt. Et annet eksempel er å bruke grunt-contrib-komprimere for å lage en zip-fil av temaet ditt, så det er enkelt å installere via WordPress admin.
Grunt er definitivt et flott verktøy for team av utviklere. Fra automatisk dokumentasjon av prosjektets avhengigheter til å bygge tilpasset, gjør Grunt deg effektiv. Bruk Grunt til å automatisere ulike oppgaver i prosjektet ditt, slik at du kan fokusere på å bygge WordPress-temaet eller plugin-modulen.
Accentsconagua