Share
In deze tutorial gaan we kijken hoe Grunt gebruikt moet worden, specifiek om je WordPress ontwikkelingsworkflow te helpen en te versnellen.
Grunt is een JavaScript-taakrunner die is geïnstalleerd via NPM en die op uw server wordt uitgevoerd. Als u de informatie in deze zelfstudie wilt gebruiken, hebt u toegang tot de opdrachtregel tot een server nodig. Kortheidshalve verwijs ik naar deze tutorial voor het up-to-date houden van Grunt en klaar voor gebruik.
Grunt is een beproefde taakloper en wordt op veel verschillende manieren op veel verschillende platforms gebruikt. Hier gaan we kijken naar het definiëren van een solide basis waarop u uw WordPress-ontwikkeling kunt baseren.
Grunt's community is ongelooflijk sterk, wat heeft geleid tot de ontwikkeling van een immense catalogus van plug-ins. Het is gemakkelijk om te verdwalen en veel tijd te besteden aan zoeken en controleren, welke te gebruiken.
Dus wat zijn enkele veelvoorkomende taken die elk WordPress-thema of plug-in moet doen of leveren?
Grunt heeft een zeer succesvol WordPress-specifiek lokaliseringspakket genaamd grunt-wp-i18n. Dit Grunt-pakket is van onschatbare waarde omdat het je map met thema's / plug-ins zal scannen, alle vertaalreeksen zal vinden en een a zal compileren .pot bestand op de opgegeven locatie. Deze .pot bestand kan vervolgens worden gebruikt om te converteren .po en .mo bestanden voor andere gebruikers om uw thema / plug-in te vertalen.
Om het pakket te configureren, voegt u het volgende toe aan uw Gruntfile.js initConfig opties:
makepot: target: options: include: ['path / to / some / file.php'], type: 'wp-plugin' // of 'wp-theme'
Roep de Grunt-taak dan als volgt (in de Gruntfile.js map):
grommen makepot
Je hele map wordt gescand en alle tekenreeksen voldoen aan een potbestand.
Alle thema's en plug-ins gebruiken regelmatig JavaScript- en CSS-bestanden. Helaas wordt de behoefte aan ontwikkel- en productieversies van de bestanden vaak over het hoofd gezien.
Uitgaande van signalen van WordPress zelf, probeer ik ervoor te zorgen dat ik volledig becommentarieerde en verkleinde bestanden heb:
Accentsconagua
filename.jsfilename.min.jsfilename.cssfilename.min.cssWaarom? Ik wil graag weten wat er in die bestanden aan de hand is, maar ik wil ook graag weten dat mijn bezoekers geoptimaliseerde versies van de bestanden ontvangen.
Als u dit wilt doen zonder een of andere taakopvolger, betekent dit dat u de activum-URL's die tijdens ontwikkeling in WordPress zijn geregistreerd, wijzigt om de gewijzigde, niet-verkleinde versie te bekijken, met behulp van een of andere JavaScript- en CSS-compressor voordat u een update vrijgeeft en vervolgens de geregistreerde URL's terugzet . En dat is niet leuk.
Met Grunt kunt u het Uglify-pakket gebruiken om JavaScript-bestanden on-the-fly te verkleinen en te optimaliseren en om CSS verder te nemen kunnen we de Sass-taak gebruiken om Sass-bestanden meteen in CSS te compileren. Voor wat het waard is, gebruik ik Sass omdat dat is wat WordPress onder de motorkap gebruikt, maar er is ook een LESS-compiler voor Grunt, en.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', rapport:' gzip ', bestanden: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / / file.js ',' assets / dynamic / paths / ** / *. js '], dev: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', opmaken: true, comprimeren: false, mangle: false, bestanden: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / naar / another / 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 ', stijl:' gecomprimeerd ', bestanden: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' expanded ', files: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '] Tip: als u de sass-taak gebruikt, voegt u toe .sass-cache aan jouw .gitignore om te voorkomen dat de compiler cache wordt toegevoegd aan uw repository.
We hebben twee belangrijke gebieden besproken die Grunt kan helpen bij de ontwikkeling van WordPress, maar laten we nog een stap verder gaan en de extra kracht vinden in het gebruik van een taakrunner.
We bieden al taken om aan bestanden te werken, dus waarom zou u het niet optimaliseren? Met de bovenstaande taak zouden we moeten uitvoeren grunt *** elke keer dat we een wijziging hebben aangebracht, waarom installeert u dan het grunt-contrib-watch-pakket? Eenmaal geconfigureerd, geeft dit Grunt opdracht om deze taken uit te voeren telkens wanneer een bestandsverandering wordt gedetecteerd.
gegrom horloge
Presto! Geen Grunt meer uitvoeren bij elke bestandsverandering, start de watcher en bewerk uw bestanden.
Zou het niet fijn zijn om JSHint op onze JavaScript-bestanden uit te voeren om die fouten of ontbrekende puntkomma's op te sporen? Installeer gewoon de taak grunt-contrib-jshint en deze voor de watchertaak voordat de bestanden worden gecompileerd. Nu zal Grunt je waarschuwen voor eventuele fouten en stoppen met het uitvoeren van verdere taken.
jshint: files: ['assets / js / filename.js', 'assets / dynamic / paths / ** / *. js'], options: expr: true, globals: jQuery: true, console: true, module: true, document: true
Dit was vooral handig voor mij bij het ontwikkelen van het Fluent Framework. Het vloeiende raamwerk is een reeks klassen die onder andere optiepagina's en metaboxen maken.
Om het ontwikkelen van afzonderlijke velden eenvoudiger te maken, heb ik een bestandsstructuur zoals deze:
activa / ├── js / | ├── filename.js ├── fields / ├── text / | ├── js / | ├── text.js ├── select / ├── js / ├── select.js
Dit maakt het heel gemakkelijk om het veld te vinden waar ik aan werk en alleen de JavaScript-code te wijzigen die voor dat veld nodig is.
Vanuit het oogpunt van de gebruiker wil ik gewoon een enkel JavaScript-bestand presenteren met alle gemeenschappelijke en veldgebaseerde JavaScript-combinatie. Laten we de taak grunt-contrib-uglify gebruiken om dit te bereiken.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', rapport:' gzip ', bestanden: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / / file.js ',' assets / dynamic / paths / ** / *. js '], dev: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', opmaken: true, comprimeren: false, mangle: false, bestanden: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / naar / another / file.js ',' assets / dynamic / paths / ** / *. js '] Met deze configuratie combineert het, nadat het JSHint heeft doorgegeven, alle JavaScript-bestanden in een ontwikkelingsbestand en een productiebestand.
WordPress.org vereist een Readme.txt bestand met informatie over het thema / plugin, maar versiebeheersystemen zoals GitHub en BitBucket geven de voorkeur Readme.md bestanden. We hoeven niet handmatig te dupliceren of deze bestanden gesynchroniseerd te houden. Laten we Grunt dat gewoon voor ons laten doen!
Installeer de taak grunt-contrib-copy en configureer deze als volgt:
kopie: dist: src: 'readme.txt', dest: 'README.md'
Een andere nuttige grunttaak is Grunt cURL-pakket. Een van de Vloeiende raamwerkvelden had toegang nodig tot de Google Fonts API-gegevens. Het laden van dit als Google adviseert zou een HTTP-verzoek zijn elke keer dat de pagina wordt geladen. Als u de inhoud van het bestand handmatig kopieert, loopt u het risico dat u veroudert. Het beste van beide werelden is om Grunt Curl te gebruiken om ons een verzoek op te slaan en updates te ontvangen.
Om up-to-date te blijven, hebben we eenvoudigweg de cURL-taak geladen, de URL gegeven om lettertypegegevens op te halen en waar de reactie op te slaan.
krul: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google -fonts-source.json '
Telkens wanneer we de taak uitvoeren, wordt de nieuwste lijst met lettertypen gedownload en opgeslagen in het kaderbestand.
Deze taak kan het beste worden gebruikt voor thema's, plug-ins en frameworks waar veel ontwikkelingsoogjes nieuwsgierig zijn. En context is nooit een slechte zaak voor degenen die rond de codebase snuffelen.
PHP Documentor is een geweldige tool voor het automatisch genereren van die gegevens. Het helpt u ook om u te concentreren op het bieden van betekenisvolle DocBlocks in uw code.
phpdocumentor: dist: options: ignore: 'node_modules'
Tip: toevoegen docs aan jouw .gitignore als u de documentatie en alle cachebestanden niet wilt binden.
Hier is de package.json en de Gruntfile.js voor de hierboven beschreven taken.
package.json
"naam": "pakketnaam", "versie": "1.0.0", "description": "...", "main": "filename.php", "scripts": "test": "echo \ "Fout: geen test opgegeven \" && exit 1 "," repository ": " type ":" git "," url ":" http://repo-url.com "," keywords ": [ "wordpress"], "auteur": "Your Name", "license": "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 "," grommen -curl ":" * "," grunt-phpdocumentor ":" ~ 0.4.1 "," grunt-wp-i18n ":" ~ 0.4.0 "
Gruntfile.js
module.exports = functie (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), kopie: dist: src: 'readme.txt', dest: 'README.md' , krul: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google-fonts-source.json ', makepot: target: options: include: [' path / to / some / file.php '], type:' wp-plugin '// or' wp -theme ', jshint: files: [' assets / js / filename.js ',' assets / dynamic / paths / ** / *. js '], options: expr: true, globals: jQuery : true, console: true, module: true, document: true, phpdocumentor: dist: options: ignore: 'node_modules', sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stijl:' gecomprimeerd ', bestanden: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' expanded ', files: [expand: 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 ', bestanden: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / / file.js ',' assets / dynamic / paths / ** / *. js '], dev: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', opmaken: true, comprimeren: false, mangle: false, bestanden: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / naar / another / 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-verlelijken); grunt.loadNpmTasks ( 'grunt-curl'); grunt.loadNpmTasks ( 'grunt-phpDocumentor); grunt.loadNpmTasks ( 'grunt-wp-i18n); grunt.registerTask ('standaard', ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copy']); grunt.registerTask ('docs', ['phpdocumentor: dist']); grunt.registerTask ('googlefonts', ['curl: google-fonts-source']); ; Tip: toevoegen node_modules en NPM-debug.log aan jouw .gitignore om te voorkomen dat de taken als gekoppelde bestanden worden toegevoegd aan uw repository.
Zoals je kunt zien aan de hand van de bovenstaande taken, kan Grunt worden gebruikt om de ontwikkeling van WordPress te automatiseren en je meer tijd te geven om je te concentreren op het schrijven van code, niet het beheren ervan.
We hebben slechts enkele taken gedetailleerd voor WordPress, maar er zijn veel andere pakketten die beschikbaar zijn voor projectspecifieke behoeften, zoals taken voor beeldoptimalisatie en nog veel, veel meer, dus ga op ontdekkingstocht!
Grunt is nu een gevestigde taakrunner en de documentatie is vergelijkbaar met WordPress zelf, waarom zou u niet overwegen om een taak te maken die niet al is bedacht en deze met de community te delen??
