Share
I det første innlegget i denne serien ga jeg en rask oversikt over Grunt, og i neste innlegg skal jeg gå gjennom de nødvendige trinnene for hvordan bruk av Grunt kan forbedre dine WordPress-utviklingsferdigheter.
Spesielt vil vi snakke grundig om de nødvendige filene som package.json og Gruntfile.js, men for nå skal vi lage noen få prøvefiler slik at du kan kjøre Grunt med WordPress-temaet eller pluginprosjektet.
Før du begynner, kan det bidra til å gjennomgå innholdet som er nevnt i den første artikkelen i denne serien.
Når du er ferdig, gå tilbake til denne artikkelen, og vi kommer i gang med å lage våre prosjektfiler. Dette vil til slutt gi oss en oversikt over hvordan det ser ut til å ha Grunt konfigurert for et gitt prosjekt.
I neste artikkel tar vi en titt på hvordan du gjør dette spesielt for WordPress-arbeid, men vi vil fokusere på en mer generisk tilnærming for nå.
Det første vi skal gjøre er å lage en package.json fil i prosjektets rot. I den nye filen legger du til følgende:
"navn": "prosjektnavn", "versjon": "1.0.0", "beskrivelse": "Fantastisk prosjekt"
Det er ikke nødvendig å legge til devDependencies objekt, da det vil bli lagt til automatisk når vi installerer Grunt-oppgaver via kommandolinjen.
For å installere Grunt-oppgaver, må du bytte til kommandolinjeverktøyet ditt. Hvis du er på en Mac, vil dette være Terminal eller iTerm. Hvis du er på en PC, så vil jeg foreslå å bruke PowerShell.
Først navigere til prosjektets rotmappe ('cd-utvikling-mappe / prosjektmappe'). Deretter skal vi installere en oppgave for å samle LESS-filer. Vi skal installere den grunt-bidragfrie oppgaven, så skriv inn følgende i kommandolinjen og trykk Tast inn:
npm installere grunt-contrib-less - save-dev
Du vil begynne å se en rekke linjer skrives ut som oppgaven, og alle dens avhengigheter blir lastet ned fra npm. Når det er gjort, bør du se noe slikt:
Nå bør du kunne gå til din package.json fil og se grunt-contrib-mindre lagt til din 'devDependencies' gjenstand også. Du vil også legge til versjonsnummeret ved siden av navnet. Jeg kunne snakke om versjon notasjon i et helt annet innlegg, men for nå, vet at tilde refererer til den versjonen som vi jobber for øyeblikket.
På dette punktet bør du se følgende:
"navn": "prosjektnavn", "versjon": "1.0.0", "beskrivelse": "Awesome prosjekt", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
Neste opp, la oss legge til en oppgave å se etter endringer i vår '.mindre' filer. Vi skal bruke Grunt-Contrib-Watch-oppgaven. Gå tilbake til kommandolinjen og trykk Tast inn:
npm installere grunt-contrib-watch - save-dev
Igjen bør du se litt utgang på skjermen, og når den er ferdig, blir den lagt til din package.json fil. Det burde nå se slik ut:
"navn": "prosjektnavn", "versjon": "1.0.0", "beskrivelse": "Fantastisk prosjekt", "devDependencies": "grunt-contrib-less": "~ 0.9.0" "Grunt-Contrib-Watch": "~ 0.5.3"
Forhåpentligvis kommer du nå til det, og du kan bruke samme prosess for å legge til andre Grunt-oppgaver. Bare en påminnelse om å alltid legge til '--Save-dev'.
Nå som vi har et par Grunt-oppgaver installert, la oss begynne å bruke dem. Det første vi skal gjøre er å lage en Gruntfile.js filen i prosjektets rotmappe. Det er her vi skal spesifisere våre oppgaver og konfigurere dem.
For å gjøre dette, legg til følgende i filen:
module.exports = funksjon (grunt)
Det første vi må gjøre er å laste inn våre oppgaver slik at vi kan utføre dem. Du gjør dette ved å legge til ved hjelp av loadNpmTasks funksjon for hver oppgave. Vennligst legg til følgende inne i de krøllete båndene:
grunt.loadNpmTasks ( 'grov-contrib-mindre');grunt.loadNpmTasks ( 'grynt-contrib-watch');
Den neste tingen vi trenger å gjøre er å konfigurere konfigurasjonen for våre installerte Grunt-oppgaver. Vi må bruke initConfig fungere som dette:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json');
Nå etter komma, legger vi til vår konfigurasjon for hver oppgave vi installerte. Du vil vanligvis finne eksempler på hvordan du konfigurerer hver oppgave i README.md fil i prosjektet på GitHub. Hver oppgave vil ha forskjellige konfigurasjonsalternativer, så sørg for å sjekke ut dokumentasjonen først.
Den første oppgaven vi skal konfigurere er grunt-contrib-mindre oppgave. Denne vil kompilere vår .mindre filer inn i .css filer for oss. Du vil ønske å lage en ny mappe for din .mindre filer og opprett en ny. Jeg lager vanligvis en css / mindre mappe og sett alle mine .mindre filer der inne.
Gå videre og legg til en ny fil som heter style.less og legg til noe kode i det slik:
en farge: blå; &: svever farge: rød;
Nå, la oss gå tilbake til vår Gruntfile.js fil og legg til følgende:
mindre:
alternativer:
stier: 'css / mindre',
yuicompress: true
,
filer:
'style.css': 'css / mindre / style.less'
Når du har lagret filen, bør du kunne bla til kommandolinjen og skrive inn grunt mindre og treffer Tast inn. Dette vil slå av den grunne oppgaven og kompilere vår .mindre fil og opprett en ny style.css filen i prosjektet vårt rotmappe.
Nå som vi har en oppgave å samle våre .mindre filer, la oss legge til en klokkeoppgave for den. Hvem vil gå til kommandolinjen og løpe grunt mindre hver gang vi gjør endringer i en fil, rett?
Etter vår forrige konfigurasjon, legg til et komma da følgende:
se:
mindre:
filer: 'css / mindre / *. mindre',
oppgaver: 'mindre'
Når du har lagret filen, blar du tilbake til kommandolinjen og skriver inn grunt ur. Dette bør se følgende:
Dette betyr at Grunt-klokken venter på eventuelle endringer i en av filene du angav i konfigurasjonen. Gå til din style.less fil og gjør en endring slik:
en farge: blå; &: svever farge: grønn;
Når du har lagret filen, vil klokkeoppgaven sparke og kompilere din .mindre filer inn i din style.css fil. Når den er fullført, vil den fortsette å se på disse filene og klar for en annen endring.
Siden det kjører, er alt du trenger å gjøre nå, gjøre en endring i en fil, lagre den, så bla til nettleseren din for å se endringene.
Vi har nå alt på plass for å bruke Grunt med ditt neste prosjekt. Dette var ganske enkelt oppsett, og jeg er sikker på at du kan se alle mulige oppgaver du kan ha i prosjektet. Senere i serien planlegger jeg å dekke mer avanserte funksjoner med Grunt som tilpassede oppgaver, nestet konfigurasjon og andre godbiter.
Men først, vi tar en titt på hvordan å innlemme dette inn i våre WordPress-prosjekter.
Accentsconagua