Share
I den här handledningen kommer vi att ta en titt på hur man använder Grunt, speciellt för att hjälpa och påskynda ditt WordPress-utvecklings arbetsflöde.
Grunt är en JavaScript-uppdragsrunner installerad via NPM som körs på din server. För att använda informationen i den här handledningen behöver du kommandoradsåtkomst till en server. För korthetens skull hänvisar jag dig till den här handledningen för att få Grunt igång och redo att användas.
Grunt är en beprövad task runner, som används på många olika sätt, på många olika plattformar. Här kommer vi att se på att definiera en solid grund för att basera din WordPress-utveckling.
Grunt's community är otroligt stark, vilket har lett till utvecklingen av en enorm katalog av plugins. Det är lätt att gå vilse och spendera mycket tid på att leta efter, och vetting, vilka som ska användas.
Så vad är några vanliga uppgifter som helst WordPress-tema eller plugin behöver utföra eller tillhandahålla?
Grunt har ett mycket framgångsrikt WordPress-specifikt lokaliseringspaket som heter grunt-wp-i18n. Detta Grunt-paket är ovärderligt eftersom det kommer att skanna din temat / plugin-mapp, hitta alla översättningssträngar och kompilera a .pott filen på den angivna platsen. Detta .pott filen kan sedan användas för att konvertera .po och .mo filer för andra användare att översätta ditt tema / plugin.
För att konfigurera paketet, lägg till följande i din Gruntfile.js initConfig alternativ:
makepot: target: options: include: ['path / to / some / file.php'], typ: 'wp-plugin' // eller 'wp-theme'
Ring sedan Grunt-uppgiften som så (medan i Gruntfile.js mapp):
grunt makepot
Hela din mapp skannas och alla strängar överensstämmer med en pottfil.
Alla teman och plugins använder regelbundet JavaScript och CSS-filer. Tyvärr är mycket tid då behovet av utvecklings- och produktionsversioner av filerna förbises.
Med hjälp av signaler från WordPress, syftar jag till att se till att jag har kommenterat och omarbetat fullständigt filer:
Accentsconagua
filename.jsfilename.min.jsfilename.cssfilename.min.cssVarför? Jag gillar att veta vad som händer i dessa filer, men jag gillar också att mina besökare serveras optimerade versioner av filerna.
Att göra det utan någon form av uppgift skulle innebära att man byter tillgångsadresser som registrerats i WordPress under utveckling för att se den ändrade, oförminerade versionen, med någon form av JavaScript och CSS-kompressor innan den släpptes en uppdatering och sedan byta de registrerade webbadresserna . Och det är inte kul.
Med Grunt kan du använda Uglify-paketet för att minimera och optimera JavaScript-filer på flyg och för att ta CSS vidare kan vi använda Sass-uppgiften att kompilera Sass-filer till CSS i flygningen. För vad det är värt, använder jag Sass eftersom det är vad WordPress använder under huven, men det finns en MINDER kompilator för Grunt, liksom.
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 / file.js ',' assets / dynamic / paths / ** / * .js '], dev: alternativ: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', försköna: true, komprimera: false, mangle: false, filer: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / till / annan / 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:" komprimerad ", filer: [expand: true, cwd: 'assets / scss', src: ['* .scss'], dest:" tillgångar / css ", ext: .min.css '], dev: alternativ: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' expanded ', filer: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest: "tillgångar / css", ext: .css '] Tips: Om du använder sass-uppgiften lägg till .sass-cache till din .gitignore för att förhindra att kompilatorns cache läggs till i ditt arkiv.
Vi har täckt två nyckelområden Grunt kan hjälpa till i WordPress-utveckling, men låt oss ta det ett steg längre och hitta ytterligare kraft i att använda en arbetslöpare.
Vi tillhandahåller redan uppgifter för att arbeta på filer så varför inte optimera det? Med uppgiften ovan måste vi springa grunt *** varje gång vi gjorde en förändring, varför installera inte Grunt-Contrib-Watch-paketet? När du har konfigurerat, kommer detta att instruera Grunt att köra dessa uppgifter varje gång en filändring detekteras.
grunt klocka
Presto! Det går inte att springa Grunt på varje filändring, bara starta klockan och redigera dina filer.
Skulle det inte vara trevligt att springa JSHint på våra JavaScript-filer för att spåra dessa buggar eller sakna semikolon? Installera bara grunt-contrib-jshint-uppgiften och den till tittarens uppgift innan filer sammanställs. Nu kommer Grunt att varna dig för eventuella fel och sluta köra vidare uppgifter.
jshint: files: ['assets / js / filename.js', 'assets / dynamic / paths / ** / *. js'], alternativ: expr: true, globals: jQuery: true, console: true, modul: true, document: true
Detta har varit särskilt användbart för mig när man utvecklar den flytande ramen. Den flytande ramen är en uppsättning klasser som bland annat skapar alternativsidor och metakasser.
För att underlätta utveckling av enkla fält har jag en filstruktur som denna:
tillgångar / ├── js / | ├── filename.js ├── fält / ├── text / | ├── js / | ├── text.js ├── select / ├── js / ├── select.js
Det gör det väldigt enkelt att hitta fältet jag jobbar med och ändra bara JavaScript som behövs för det fältet.
Från användarens synvinkel vill jag bara tjäna en enda JavaScript-fil med alla gemensamma och fältbaserade JavaScript i kombination. Låt oss använda grunt-contrib-uglify uppgiften att uppnå detta.
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 / file.js ',' assets / dynamic / paths / ** / * .js '], dev: alternativ: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', försköna: true, komprimera: false, mangle: false, filer: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / till / annan / file.js ',' assets / dynamic / paths / ** / * .js '] Med denna konfiguration kommer den att kombinera alla JavaScript-filer till en utvecklingsfil och produktionsfil efter det att den passerat JSHint.
WordPress.org kräver en Readme.txt fil som specificerar temat / plugin-informationen, men versionskontrollsystem som GitHub och BitBucket föredrar Readme.md filer. Vi behöver inte manuellt duplicera eller behålla dessa filer i synkronisering. Låt oss bara låta Grunt göra det för oss!
Installera grunt-contrib-copy-uppgiften och konfigurera den så här:
kopiera: dist: src: 'readme.txt', dest: 'README.md'
En annan användbar Grunt-uppgift är Grunt cURL-paketet. Ett av de flytande ramfälten behövde åtkomst till Google Fonts API-data. Att ladda detta som Google reccomends skulle vara en HTTP-begäran varje gång sidan laddas. Alternativt, om du manuellt kopierar innehållet i filen ner, riskerar du att bli föråldrad. Det bästa av båda världarna är att använda Grunt Curl för att spara oss en förfrågan och få uppdateringar.
För att hålla sig uppdaterad laddades vi enkelt upp cURL-uppgiften, gav den webbadressen för att hämta typsnittsdata från och var att spara svaret.
curl: 'google-teckensnitt-källa': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'tillgångar / säljare / google -fonter-source.json '
Nu, varje gång vi kör uppgiften, hämtas den senaste teckensnittslistan och sparas i ramfilen.
Denna uppgift används bäst på teman, plugins och ramar där många utvecklingsögon kommer att bli nyfikna. Och kontext är aldrig en dålig sak för de som kramar runt kodbasen.
PHP Documentor är ett utmärkt verktyg för automatisk generering av data. Det hjälper dig också att fokusera på att ge meningsfulla DocBlocks i din kod.
phpdocumentor: dist: options: ignore: 'node_modules'
Tips: Lägg till docs till din .gitignore om du inte vill begå dokumentationen och alla dess cachefiler.
Här är package.json och den Gruntfile.js för de uppgifter som beskrivs ovan.
package.json
"namn": "paketnamn", "version": "1.0.0", "beskrivning": "...", "huvud": "filnamn.php", "skript": "test" \ "Fel: inget test specificerat \" && avsluta 1 "," förvar ": " typ ":" git "," url ":" http://repo-url.com "," nyckelord ": [ "wordpress"], "author": "Ditt namn", "licens": "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
module.exports = funktion (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), kopia: dist: src: 'readme.txt', dest: 'README.md' , curl: 'google-teckensnitt-källa': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: "tillgångar / leverantör / google-teckensnitt-source.json ', makepot: target: options: include: [' path / to / some / file.php '], typ:' wp-plugin '// eller' wp -theme ', jshint: files: [' assets / js / filename.js ',' assets / dynamic / paths / ** / * .js '], alternativ: expr: true, globals: jQuery : sant, konsol: sant, modul: sant, dokument: true, phpdocumentor: dist: alternativ: ignorera: 'node_modules', sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ", stil:" komprimerad ", filer: [expand: true, cwd: 'assets / scss', src: ['* .scss'], dest:" tillgångar / css ", ext: .min.css '], dev: alternativ: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' expanded ', filer: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest: "tillgångar / 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 / file.js ',' assets / dynamic / paths / ** / * .js '], dev: alternativ: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', försköna: true, komprimera: false, mangle: false, filer: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / till / annan / file.js ',' assets / dynamic / paths / ** / * .js '])); grunt.loadNpmTasks ( 'grunt-contrib-copy'); grunt.loadNpmTasks ( 'grunt-contrib-jshint'); grunt.loadNpmTasks ( 'grunt-contrib-sass'); grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.loadNpmTasks ( 'grunt-curl'); grunt.loadNpmTasks ( 'grunt-phpdocumentor'); grunt.loadNpmTasks ( 'grunt-wp-i18n'); grunt.registerTask ('default', ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copy']); grunt.registerTask ('docs', ['phpdocumentor: dist']); grunt.registerTask ('googlefonts', ['curl: google-fonts-source']); ; Tips: Lägg till node_modules och NPM-debug.log till din .gitignore för att förhindra att uppgifterna som tillhörande filer läggs till i ditt förråd.
Som du kan se från ovanstående uppgifter kan Grunt användas för att automatisera WordPress-utveckling och ge dig mer tid att fokusera på att skriva kod, inte hantera det.
Vi har detaljerade några få uppgifter för WordPress, men det finns många andra paket där ute för projektspecifika behov, som bildoptimeringsuppgifter och mycket, mycket mer, så gå och utforska!
Grunt är nu en väletablerad arbetslöpare, och dokumentationen är i nivå med WordPress själv, varför inte överväga att göra en uppgift som inte redan är tänkt på och dela den med samhället?
