En introduksjon til Grunt

I dag bruker de fleste web-utviklere på forhånd mye tid med teknologier som Sass, LESS, HTML og JavaScript. De siste par årene har vært en spennende tid i webutvikling og teknologier som Grunt har bidratt til spenningen.

I denne serien planlegger jeg å introdusere deg til Grunt og å snakke om hvordan det kan forbedre vår utvikling av WordPress-temaer og plugins. Vi vil også jobbe med å konfigurere Grunt for å forberede den til bruk i ditt neste prosjekt. Endelig vil vi også se på kommandolinjeverktøyene.

Om Grunt

Grunt er et automatiseringsverktøy for frontend utviklere. Det er skrevet i JavaScript, så det bør være pent å plukke opp og forstå hvis du vet JavaScript. Her er beskrivelsen fra Grunt nettside:

I ett ord: automatisering. Jo mindre jobb du må gjøre når du utfører repeterende oppgaver som minifisering, kompilering, enhetstesting, linting osv., Jo lettere blir jobben din. Etter at du har konfigurert det, kan en oppgaveløper gjøre det meste av det verdslige arbeidet for deg - og laget ditt - med i utgangspunktet null innsats.

Grunt er et operativsystems agnostisk verktøy, så om du utvikler på Mac, Windows eller Linux, bør du kunne bruke den. Dette gjør det veldig bra for større lag som har en blanding av plattformer som de utvikler. Den beste delen er at når du setter opp prosjektet ditt med Grunt, er det også lett å dele med andre. Vi vil dekke dette mer i et annet innlegg.

node.js

For de av dere som ikke har jobbet med eller hørt om det, er Node.js en JavaScript-kjøretid. Det har virkelig tatt seg av de siste årene, og teknologier som Grunt og Bower har virkelig hjulpet det med å akselerere adopsjon. Her er beskrivelsen fra Node-nettstedet:

Node.js er en plattform bygget på Chromes JavaScript runtime for enkelt å bygge raske, skalerbare nettverksprogrammer. Node.js bruker en hendelsesdrevet, ikke-blokkerende I / O-modell som gjør den lett og effektiv, perfekt for dataintensive sanntidsprogrammer som strekker seg over distribuerte enheter.

Node er en forutsetning for å bruke Grunt, og du må ha den installert på maskinen din og muligens serverne dine. Grunt bruker npm til å installere og administrere plugins. Du kan lese mer om kravene på Komme i gang-siden på Grunt-nettsiden.

Gruntfile

Når du får oppgavene du trenger for prosjektet ditt installert, trenger du en måte å utføre dem på. Det er her Gruntfile.js-filen kommer inn på bildet. Gruntfile angir hvilke oppgaver som skal inkluderes og alternativene du angir for å utføre dem.

Her vil du mest sannsynlig angi mål og kilder for hver oppgave. Et eksempel vil peke på dine forkompilerte .scss-filer og spesifisere plasseringen der du vil at de kompilerte .css-filene skal lagres på. Du vil også angi andre alternativer som hvert plugin vil ha tilgjengelig for deg. Disse er vanligvis dokumentert med hvert plugin.

oppgaver

Oppgaver er virkelig hvor kraften er etter min mening. En oppgave er bare en måte å utføre en gruppe av plugins.You vil ønske å angi en standard oppgave som utføres når du kjører 'grynte'. Du kan bruke klokkeoppgaven, slik at du automatisk kan utføre oppgaver eller plugins når bestemte filer endres i prosjektet.

Jeg planlegger å komme inn på oppgaver mer i et senere innlegg.

Konklusjon

Grunt er definitivt et verktøy du bør bli kjent med om du er en frontend eller WordPress-utvikler. Dette sitatet fra Grunt-området summerer virkelig ting opp,

Grunt-økosystemet er stort og det vokser hver dag. Med bokstavelig talt hundrevis av plugins å velge mellom, kan du bruke Grunt til å automatisere omtrent alt med minimal innsats. Hvis noen ikke allerede har bygget det du trenger, er det en bris å skrive og publisere ditt eget Grunt-plugin til npm.

Hvis du ikke allerede har begynt å bruke det i prosjektene dine, bør du definitivt vurdere det.

ressurser

  • Grynte
  • node.js
  • Chromes JavaScript-kjøretid
  • Grunt Komme i gang
  • Grunt Contrib Watch-oppgave