Share
I denne opplæringen skal vi se på hvordan du bruker Grunt, spesielt for å hjelpe og øke hastigheten på WordPress-utviklings arbeidsflyten.
Grunt er en JavaScript-oppgaveløper installert via NPM som kjører på serveren din. For å bruke informasjonen i denne opplæringen, trenger du kommandolinjens tilgang til en server. For korthetens skyld refererer jeg deg til denne opplæringen for å få Grunt oppe og klar og klar til bruk.
Grunt er en påvist oppgaveløper, brukt på mange forskjellige måter, på tvers av mange forskjellige plattformer. Her skal vi se på å definere et solid fundament for å basere WordPress-utviklingen.
Grunts samfunn er utrolig sterk, noe som har ført til utviklingen av en enorm katalog med plugins. Det er lett å gå seg vill og bruke mye tid på å lete etter og vette, hvilke som skal brukes.
Så hva er noen vanlige oppgaver som et WordPress-tema eller plugin trenger å oppnå eller gi?
Grunt har en svært vellykket WordPress-spesifikk lokaliseringspakke kalt grunt-wp-i18n. Denne Grunt-pakken er uvurderlig, da den vil skanne tema / plugin-mappen, finne alle oversettelsessnormer, og kompilere a .gryte filen på den angitte plasseringen. Dette .gryte filen kan da brukes til å konvertere .po og .mo filer for andre brukere å oversette temaet / plugin-modulen.
For å konfigurere pakken, legg til følgende i din Gruntfile.js initConfig alternativer:
makepot: target: options: include: ['path / to / some / file.php'], type: 'wp-plugin' // eller 'wp-theme'
Ring deretter Grunt-oppgaven som denne (mens du er i Gruntfile.js mappe):
grunt makepot
Hele mappen din blir skannet og alle strengene overholdt en pottfil.
Alle temaer og plugins bruker jevnlig JavaScript og CSS-filer. Dessverre, mye av tiden er behovet for utviklings- og produksjonsversjoner av filene oversett.
Å ta signaler fra WordPress selv, jeg tar sikte på å sørge for at jeg har fullt kommentert og minifiserte filer:
Accentsconagua
filename.jsfilename.min.jsfilename.cssfilename.min.cssHvorfor? Jeg liker å vite hva som skjer i disse filene, men jeg liker også å vite at mine besøkende blir servert optimaliserte versjoner av filene.
For å gjøre det uten noen form for oppgave vil løperen bety å bytte nettverksadressene som er registrert i WordPress under utviklingen for å vise den endrede, ikke-minifiserte versjonen, ved hjelp av en form for JavaScript og CSS kompressor før du slipper en oppdatering, og deretter bytte de registrerte nettadressene tilbake . Og det er ikke gøy.
Med Grunt kan du bruke Uglify-pakken til å minifisere og optimalisere JavaScript-filer i farten, og for å ta CSS videre, kan vi bruke Sass-oppgaven til å kompilere Sass-filer til CSS i fly. For hva det er verdt, bruker jeg Sass fordi det er hva WordPress bruker under hetten, men det er en mindre kompilator for Grunt, så vel.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', rapport:' gzip ', filer: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / file.js ',' assets / dynamic / paths / ** / * .js '], dev: alternativer: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', beautify: true, komprimere: false, mangle: false, filer: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / til / annen / file.js ',' assets / dynamic / paths / ** / *. js '] sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' komprimert ', filer: [utvide: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: alternativer: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' utvidet ', filer: [utvide: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '] Tips: Hvis du bruker sass-oppgaven, legg til .sass-cache til din .gitignore for å forhindre at kompilatorbufferen blir lagt til i depotet ditt.
Vi har dekket to viktige områder Grunt kan bistå i WordPress utvikling, men la oss ta det et skritt videre og finne den ekstra kraften i å bruke en oppgaveløper.
Vi gir allerede oppgaver til å jobbe med filer, så hvorfor ikke optimalisere det? Med oppgaven ovenfor må vi løpe grynte *** hver gang vi foretok en endring, hvorfor ikke installere grunt-contrib-watch-pakken? Når dette er konfigurert, vil dette instruere Grunt å kjøre disse oppgavene hver gang en filendring oppdages.
grunt ur
Presto! Ikke lenger kjører Grunt på hver filendring, bare start watcher og rediger filene dine.
Ville det ikke vært fint å kjøre JSHint på våre JavaScript-filer for å spore disse feilene eller mangle semikolon? Bare installer grunt-contrib-jshint-oppgaven og den til klokken oppgave før filene blir samlet. Nå vil Grunt advare deg om eventuelle feil og slutte å kjøre videre oppgaver.
jshint: files: ['assets / js / filename.js', 'assets / dynamic / paths / ** / *. js'], alternativer: expr: true, globals: jQuery: sant, konsoll: modul: sant, dokument: sant
Dette har vært spesielt nyttig for meg når du utvikler flytende rammeverket. Flytende rammeverk er et sett av klasser som blant annet lager opsjons sider og meta bokser.
For å gjøre det enklere å utvikle enkeltfelt, har jeg en filstruktur som denne:
eiendeler / ├── js / | ├── filename.js ├── field / ├── text / | ├── js / | ├── text.js ├── select / ├── js / ├── select.js
Dette gjør det veldig enkelt å finne feltet jeg jobber med, og endre bare JavaScript som trengs for dette feltet.
Fra et brukerperspektiv ser jeg bare til å betjene en enkelt JavaScript-fil med alle de felles og feltbaserte JavaScript kombinert. La oss bruke grunt-contrib-uglify oppgaven for å oppnå dette.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', rapport:' gzip ', filer: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / file.js ',' assets / dynamic / paths / ** / * .js '], dev: alternativer: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', beautify: true, komprimere: false, mangle: false, filer: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / til / annen / file.js ',' assets / dynamic / paths / ** / *. js '] Med denne konfigurasjonen, etter at den har passert JSHint, vil den kombinere alle JavaScript-filene til en utviklingsfil og produksjonsfil.
WordPress.org krever en readme.txt fil som beskriver temaet / plugin-informasjonen, men versjonskontrollsystemer som GitHub og BitBucket foretrekker Readme.md filer. Vi trenger ikke manuelt duplisere eller beholde disse filene i synkronisering. La oss bare la Grunt gjøre det for oss!
Installer grunt-bidragsoppgaveoppgaven og konfigurer den slik:
kopi: dist: src: 'readme.txt', dest: 'README.md'
En annen nyttig Grunt-oppgave er Grunt cURL-pakken. Et av de flytende rammefeltene trengte tilgang til Google Fonts API-data. Laster dette som Google reccomends ville være en HTTP-forespørsel hver gang siden lastes inn. Alternativt, hvis du manuelt kopierer innholdet i filen ned, risikerer du å bli utdatert. Det beste fra begge verdener er å bruke Grunt Curl for å redde oss en forespørsel og få oppdateringer.
For å holde deg oppdatert, lastet vi bare opp cURL-oppgaven, ga den nettadressen for å hente fontdata fra, og hvor du skal lagre svaret.
krølle: 'google-skrifter-kilde': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google -fonter-source.json '
Nå, hver gang vi kjører oppgaven, lastes den nyeste skriftlisten ned, og lagres i rammafilen.
Denne oppgaven er best brukt på temaer, plugins og rammer der mange utviklingsøyner vil bli nydelig. Og kontekst er aldri en dårlig ting for de som kjører rundt kodebasen.
PHP Documentor er et flott verktøy for automatisk generering av dataene. Det hjelper deg også med å fokusere på å gi meningsfylte DocBlocks i koden din.
phpdocumentor: dist: options: ignore: 'node_modules'
Tips: Legg til docs til din .gitignore hvis du ikke vil forplikte dokumentasjonen og alle dens cachefiler.
Her er package.json og Gruntfile.js for oppgavene beskrevet ovenfor.
package.json
"navn": "pakkenavn", "versjon": "1.0.0", "beskrivelse": "...", "hoved": "filnavn.php", "skript": "test" \ "Feil: ingen test oppgitt \" && avslutte 1 "," depot ": " type ":" git "," url ":" http://repo-url.com "," søkeord " "wordpress"], "forfatter": "Ditt navn", "lisens": "GPL", "devDependencies": "grunt": "~ 0.4.2", "grunt-contrib-copy": "~ 0,5. 0 "," grunt-contrib-jshint ":" ~ 0.8.0 "," grunt-contrib-sass ":" ^ 0.7.3 "," grunt-contrib-uglify ":" ~ 0.3.3 " -curl ":" * "," grunt-phpdocumentor ":" ~ 0.4.1 "," grunt-wp-i18n ":" ~ 0.4.0 "
Gruntfile.js
modul.exports = funksjon (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), kopi: dist: src: 'readme.txt', dest: 'README.md' , krølle: 'google-fonter-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'eiendeler / leverandør / google-fonter-source.json ', makepot: target: options: include: [' path / to / some / file.php '], type:' wp-plugin '// eller' wp -theme ', jshint: files: [' assets / js / filename.js ',' assets / dynamic / paths / ** / *. js '], alternativer: expr: true, globals: jQuery : true: konsoll: sann, modul: sann, dokument: true, phpdocumentor: dist: alternativer: ignorere: 'node_modules', sass: dist: alternativer: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' komprimert ', filer: [utvide: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: alternativer: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' utvidet ', filer: [utvide: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '], uglify: dist: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', rapport:' gzip ', filer: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / file.js ',' assets / dynamic / paths / ** / * .js '], dev: alternativer: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', beautify: true, komprimere: false, mangle: false, filer: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / til / annen / file.js ',' assets / dynamic / paths / ** / *. js '])); grunt.loadNpmTasks ( 'grov-contrib-kopi'); grunt.loadNpmTasks ( 'grov-contrib-jshint'); grunt.loadNpmTasks ( 'grov-contrib-sass'); grunt.loadNpmTasks ( 'grov-contrib-uglify'); grunt.loadNpmTasks ( 'grov-krøll'); grunt.loadNpmTasks ( 'grov-phpdocumentor'); grunt.loadNpmTasks ( 'grov-WP-i18n'); grunt.registerTask ('standard', ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copy']); grunt.registerTask ('docs', ['phpdocumentor: dist']); grunt.registerTask ('googlefonts', ['curl: google-fonts-source']); ; Tips: Legg til node_modules og NPM-debug.log til din .gitignore for å forhindre at oppgavene som tilknyttede filer blir lagt til i depotet ditt.
Som du kan se fra oppgavene ovenfor, kan Grunt brukes til å automatisere WordPress-utvikling og gi deg mer tid til å fokusere på å skrive kode, ikke administrere det.
Vi har detaljert bare noen få oppgaver for WordPress, men det er mange andre pakker der ute for prosjektspesifikke behov, for eksempel bildeoptimaliseringsoppgaver og mye, mye mer, så gå og utforske!
Grunt er nå en veletablert oppgaveløper, og dokumentasjonen er på nivå med WordPress selv, hvorfor ikke vurdere å gjøre en oppgave ikke allerede tenkt på og dele den med fellesskapet?
