Share
În acest tutorial, vom examina cum să folosim Grunt, în special pentru a ajuta și a accelera fluxul de lucru pentru dezvoltarea WordPress.
Grunt este un alergător de sarcină JavaScript instalat prin intermediul NPM care rulează pe serverul dvs. Pentru a utiliza informațiile din acest tutorial, veți avea nevoie de acces la linia de comandă la un server. Din motive de coerență, vă refer la acest tutorial pentru a obține Grunt și a alerga și gata pentru utilizare.
Grunt este un testator de sarcini dovedit, utilizat în multe moduri diferite, pe mai multe platforme diferite. Aici, vom analiza definirea unei baze solide pe care să se bazeze dezvoltarea WordPress.
Comunitatea lui Grunt este incredibil de puternică, ceea ce a dus la dezvoltarea unui catalog imens de pluginuri. Este ușor să vă pierdeți și să petreceți mult timp în căutare și verificare, pe care să o utilizați.
Deci, care sunt unele sarcini obișnuite pe care orice temă sau plugin din WordPress trebuie să le îndeplinească sau să le furnizeze?
Grunt are un pachet de localizare foarte cunoscut WordPress, numit grunt-wp-i18n. Acest pachet Grunt este de neprețuit, deoarece va scana tema / dosarul plugin-ului, va găsi toate șirurile de traducere și va compila a .oală fișier în locația specificată. Acest .oală fișierul poate fi apoi folosit pentru a converti .po și .mo fișiere pentru alți utilizatori pentru a traduce tema / pluginul.
Pentru a configura pachetul, adăugați următoarele la dvs. Gruntfile.js initConfig Opțiuni:
makepot: țintă: opțiuni: include: ['path / to / some / file.php'], tastați: 'wp-plugin' sau 'wp-theme'
Apoi, apelați sarcina Grunt ca aceasta (în timp ce în Gruntfile.js pliant):
grunt makepot
Întregul dosar scanat și toate șirurile au fost respectate într-un fișier de fișiere.
Toate temele și pluginurile utilizează în mod regulat fișiere JavaScript și CSS. Din nefericire, o mare parte din timp este trecut cu vederea nevoia de versiuni de dezvoltare și de producție ale fișierelor.
Luând îndemânări din WordPress în sine, am să fiu sigur că am completat fișierele comentate și minificate:
Accentsconagua
filename.jsfilename.min.jsfilename.cssfilename.min.cssDe ce? Îmi place să știu ce se întâmplă în aceste fișiere, dar îmi place și să știu că vizitatorii mei primesc versiuni optimizate ale fișierelor.
Pentru a face acest lucru fără ca un anumit tip de alergator de sarcină să însemne schimbarea URL-urilor de active înregistrate în WordPress în timpul dezvoltării, să vizualizeze versiunea schimbată, nefinalizată, utilizând o anumită formă de compresor JavaScript și CSS înainte de a lansa o actualizare și apoi să schimbe adresele URL înregistrate . Și nu e distractiv.
Cu Grunt, puteți utiliza pachetul Uglify pentru a minimiza și optimiza fișierele JavaScript în zbor și pentru a lua CSS mai departe, putem folosi sarcina Sass pentru a compila fișierele Sass în CSS și în zbor. Pentru ceea ce merită, folosesc Sass pentru că asta este ceea ce WordPress folosește sub capotă, dar există un compilator mai mic pentru Grunt, precum și.
ugliți: dist: opțiuni: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', raport:' gzip ', fișiere: ' assets / js / filename.min.js ': [' assets / path / to / file.js ' file.js ',' assets / dynamic / paths / ** / *. js '], dev: opțiuni: banner:' /! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', înfrumuseța: adevărat, comprimare: false, mangle: false, fișiere: ' assets / js / filename.js ': [' assets / path / to / file.js ' to / other / file.js ',' assets / dynamic / paths / ** / *. js '] sass: dist: opțiuni: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' comprimat ', fișiere: [extinde: true, cwd: assets / scss', src: .min.css '], dev: opțiuni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' expanded ', fișiere: [extinde: true, cwd: assets / scss' src: .css '] Sfat: dacă utilizați sarcina Sass adăugați .Sass-cache pentru dumneavoastră .gitignore pentru a preveni adăugarea cache-ului compilatorului în depozitul dvs..
Am acoperit două domenii cheie Grunt poate ajuta în dezvoltarea WordPress, dar hai să facem un pas mai departe și să găsim puterea suplimentară în utilizarea unui alergător.
Oferim deja sarcini pentru a lucra la fișiere, de ce să nu o optimizăm? Cu sarcina de mai sus, ar trebui să fugim grunt *** de fiecare dată când am făcut o schimbare, de ce nu instalați pachetul grunt-contrib-watch? Odată configurat, acest lucru îl va instrui pe Grunt să execute acele sarcini de fiecare dată când este detectată o modificare a fișierului.
Ceasul de grunt
Presto! Nu mai rulați Grunt la fiecare schimbare de fișier, doar porniți observatorul și editați fișierele.
Nu ar fi frumos să rulați JSHint pe fișierele noastre JavaScript pentru a urmări acele bug-uri sau punct și virgulă care lipsesc? Trebuie doar să instalați sarcina grunt-contrib-jshint și sarcina observatorului înainte de a fi compilate fișierele. Acum, Grunt vă va avertiza de orice eroare și va înceta să mai executați alte sarcini.
jshint: fișierele: ['assets / js / filename.js', 'assets / dynamic / paths / ** / *. js'], opțiuni: expr: true, globals: jQuery: modul: adevărat, document: true
Acest lucru a fost deosebit de util pentru mine atunci când am dezvoltat Fluent Framework. Fluent Framework este un set de clase care, printre altele, creează pagini de opțiuni și casete meta.
Pentru a ușura câmpurile unice în curs de dezvoltare, am o structură de fișiere ca aceasta:
active / ├── js / | ├────────────────────────────────────────────────────────────────────────────────────────────────────────── ├─ | js / | ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Acest lucru face foarte ușor pentru a găsi domeniul în care lucrez și modific doar JavaScript necesar pentru acest domeniu.
Din punct de vedere al utilizatorului, vreau doar să servească un singur fișier JavaScript cu combinarea tuturor combinațiilor comune și bazate pe câmpuri JavaScript. Să folosim sarcina grunt-contrib-uglify pentru a realiza acest lucru.
ugliți: dist: opțiuni: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', raport:' gzip ', fișiere: ' assets / js / filename.min.js ': [' assets / path / to / file.js ' file.js ',' assets / dynamic / paths / ** / *. js '], dev: opțiuni: banner:' /! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', înfrumuseța: adevărat, comprimare: false, mangle: false, fișiere: ' assets / js / filename.js ': [' assets / path / to / file.js ' to / other / file.js ',' assets / dynamic / paths / ** / *. js '] Cu această configurație, după ce trece JSHint, va combina toate fișierele JavaScript într-un fișier de dezvoltare și fișier de producție.
WordPress.org necesită a readme.txt fișier care detaliază informațiile despre temă / plugin, dar preferă sistemele de control al versiunilor precum GitHub și BitBucket Readme.md fișiere. Nu avem nevoie de duplicat manual sau să păstrăm sincronizarea acestor fișiere. Să lăsăm Grunt să facă asta pentru noi!
Instalați sarcina grunt-contrib-copy și configurați-o astfel:
copie: dist: src: 'readme.txt', dest: 'README.md'
O altă sarcină Grunt utilă este pachetul Grunt cURL. Unul dintre câmpurile Fluent Framework a avut nevoie de acces la datele API-ului Google Fonts. Încărcarea acestuia, deoarece recomandările Google ar fi o solicitare HTTP de fiecare dată când pagina este încărcată. În mod alternativ, dacă copiați manual conținutul fișierului, aveți riscul de a nu mai fi dat. Cel mai bun din ambele lumi este să folosiți Grunt Curl pentru a ne salva o cerere și pentru a obține actualizări.
Pentru a ne menține la curent, am încărcat pur și simplu sarcina cURL, i-am dat adresa URL pentru a prelua datele din font și unde să salvăm răspunsul.
curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google -fonts-source.json '
Acum, de fiecare dată când rulam sarcina, ultima listă de fonturi este descărcată și salvată în fișierul cadru.
Această sarcină este folosită cel mai bine pe teme, pluginuri și cadre în care o mulțime de ochi pentru dezvoltatori vor fi delectați. Și contextul nu este niciodată un lucru rău pentru cei care aruncă în jurul codului.
Documentul PHP este un instrument excelent pentru auto-generarea acelor date. De asemenea, vă ajută să vă concentrați asupra furnizării de DocBlocks semnificative în codul dvs..
phpdocumentor: dist: opțiuni: ignore: 'node_modules'
Sfat: Adăugați Documente pentru dumneavoastră .gitignore dacă nu doriți să comiteți documentația și toate fișierele de memorie cache.
Aici este package.json si Gruntfile.js pentru sarcinile detaliate mai sus.
package.json
"nume": "numele pachetului", "versiunea": "1.0.0", "descriere": "...", "principal": "filename.php" \ "Eroare: nici un test specificat \" && ieșire 1 "," depozit ": " type ":" git "," url ":" http://repo-url.com " "wordpress"], "autor": "Numele tău", "licență": "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 " -curl ":" * "," grunt-phpdocumentor ":" ~ 0.4.1 "," grunt-wp-i18n ":" ~ 0.4.0 "
Gruntfile.js
(de exemplu: "readme.txt", dest: 'README.md'), copiați: mbm.exports = funcția (grunt) grunt.initConfig (pkg: grunt.file.readJSON , curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: vendor / google-fonts-source.json ', makepot: țintă: opțiuni: include: [' path / to / some / file.php '], tastați:' wp-plugin ' -exp: true, globals: jQuery , jshint: fișiere: ['assets / js / filename.js', 'assets / dynamic / paths / ** / *. : distanta op: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' comprimat ', fișiere: [extinde: true, cwd: assets / scss', src: .min.css '], dev: opțiuni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', stil:' expanded ', fișiere: [extinde: true, cwd: assets / scss' src: .css '], ugliți: dist: opțiuni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', raport:' gzip ', fișiere: ' assets / js / filename.min.js ': [' assets / path / to / file.js ' file.js ',' assets / dynamic / paths / ** / *. js '], dev: opțiuni: banner:' /! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', înfrumuseța: adevărat, comprimare: false, mangle: false, fișiere: ' assets / js / filename.js ': [' assets / path / to / file.js ' to / other / file.js ',' assets / dynamic / paths / ** / *. js ']); grunt.loadNpmTasks ( 'groh-contrib-copy'); grunt.loadNpmTasks ( 'groh-contrib-jshint'); grunt.loadNpmTasks ( 'groh-contrib-sass'); grunt.loadNpmTasks ( 'groh-contrib-sluți'); grunt.loadNpmTasks ( 'groh-curl'); grunt.loadNpmTasks ( 'groh-phpdocumentor'); grunt.loadNpmTasks ( 'groh-wp-i18n'); grunt.registerTask ("implicit", ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copy')); grunt.registerTask ("docs", ['phpdocumentor: dist']); grunt.registerTask ("googlefonts", ['curl: google-fonts-source']); ; Sfat: Adăugați node_modules și NPM-debug.log pentru dumneavoastră .gitignore pentru a preveni ca sarcinile asociate fișierelor asociate să fie adăugate în depozitul dvs..
După cum puteți vedea din sarcinile de mai sus, Grunt poate fi folosit pentru a ajuta la automatizarea dezvoltării WordPress și pentru a vă oferi mai mult timp să vă concentrați asupra scrierea codului,.
Am detaliat doar câteva sarcini pentru WordPress, dar există multe alte pachete acolo pentru nevoile specifice ale proiectului, precum sarcinile de optimizare a imaginilor și multe altele, așa că explorați!
Grunt este acum un alergator de sarcini bine stabilit, iar documentatia este pe picior de egalitate cu WordPress, de ce sa nu luati in calcul o sarcina care nu a fost deja gandita si sa o impartasiti cu comunitatea?
