Cum să optimizați fluxul de lucru WordPress pentru dezvoltare

Din fericire, unii oameni foarte inteligenți au creat instrumente excelente care ne pot ajuta să facem fluxul de lucru cât mai direct posibil:

• Busolă
• mormăit
• H5BP Build Script
• Nettuts + Fetch

Aș dori să mă concentrez asupra modului de implementare a acestor tehnologii pentru dezvoltarea temelor WordPress. Nu vreau să dau o analiză aprofundată a acestor instrumente, deoarece există câteva articole deja existente în rețeaua Tuts + care fac o treabă foarte bună explicând cum să le instalați și să le configurați, cum ar fi:

• Stăpânirea lui Sass
• Faceți cunoștință cu Grunt: Instrumentul de construire pentru JavaScript
• Ghidul oficial pentru HTML5 Boilerplate
• Introducerea Nettuts + Fetch

Fluxul de lucru

Fără alte idei, voi dezvolta o temă mică de testare care va descrie pașii pe care îi iau pentru a încorpora împreună aceste instrumente.

Pasul 1 Descărcați WordPress

Vom folosi pachetul Nettuts + Fetch pentru a descărca cea mai recentă versiune de WordPress, desigur dacă folosiți un alt IDE decât Sublime Text 2 va trebui să utilizați o altă metodă.

Pasul 2 Configurați structura fișierului tematic

Pentru tema noastră de testare vom crea următoarea structură a fișierelor:

Să aruncăm o privire rapidă asupra fiecărui dosar și dosar și să vedem pentru ce este vorba:

• construi - Scriptul de construire H5BP
• img - Imagini
• js - Fișiere JavaScript
• Sass - stylesheets
• src - Fișierele de configurare Grunt / Compass

functions.php - Puteți include orice funcție de care aveți nevoie în acest fișier, am început încărcarea jQuery în meu wp_head (cele mai bune practici spun pentru a încărca jQuery și alte scripturi înainte de tag-ul de închidere a corpului, dar plugin-uri place să încarce scripturi personalizate în wp_head și dacă se bazează pe jQuery nu vor funcționa), de asemenea, îmi încarc scripturile în wp_footer (nu am creat încă acest fișier).

 funcția jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Inserați scripturi tematice personalizate în subsolul wp_enqueue_script ('custom-scripts', get_bloginfo ('template_url') ./js/script.min.js ', array (' jquery '), false, true);  add_action ('after_setup_theme', 'jvs_theme_setup');

index.php - Nimic extra special aici doar un fișier pe care îmi place să încep cu toate proiectele mele, observați că foaia principală de stil este chemată după wp_head acest lucru ne permite să ignorăm stilurile personalizate adăugate de pluginuri fără a folosi urât !important declaraţii.

  >          >   

S-ar putea să fi observat că nici unul style.css nici script.min.js fișierele există încă, nu vă faceți griji că vom avea grijă de asta.

Pasul 3 Configurați foile de stil cu Sass / Compass

Mai întâi trebuie să ne înființăm config.rb deoarece acest lucru va spune busola unde sunt stilurile noastre de stiluri si cum dorim sa le compilati, o vom stoca in interiorul src pliant:

 # Directorii temă: http_path = "" css_dir = "..." sass_dir = "... / sass" images_dir = "... / img" line): output_style =: compact # Pentru a activa căile relative la active prin intermediul funcțiilor ajutorului busolei. relative_assets = true # Pentru a dezactiva comentariile de depanare care afișează locația inițială a selectorilor. # line_comments = false

Nimic nu este aici, înseamnă că Compass ne va căuta .SCSS fișiere în interiorul Sass și puneți foile de stil compilate în directorul rădăcină al temei, dacă doriți să aflați mai multe despre configurarea fișierului de configurare, consultați documentația oficială.

Să ne revedem Sass din nou, și să vedem ce putem face acum.

Acum putem separa stiluri legate în propriile fișiere din interiorul unui sub-folder numit amprente parțiale și au un singur style.scss fișier unde putem pune principalele stiluri care ar trebui să arate astfel:

 // Compass bibliotecă @import "compass"; // variabilele globale @import "partials / base.scss"; // Normalizați elementele @import "partials / normalize.scss"; / * == | == Stiluri primare ========================================= ============ Autor: ==================================== ====================================== * / // Stilurile principale merg aici / * == ================================================== =================== * / // stilurile CSS specifice WP @import "partials / wp.scss"; // clase helper non-semantice @import "partials / helpers.scss";

Observați cum am prefixat fișierele parțiale cu o subliniere, acest lucru îi spune busolei să le ignore, deoarece vrem doar să compilam foaia de stil principală. Acum, dacă navigăm la noi src dosar în terminalul nostru și a alerga busola compila va crea un nou style.css fișier în interiorul nostru Sass dosar cu toate partialele noastre concatenate într-o singură foaie de stil. Cu toate acestea, am lipsit linii de antet pentru comentariile necesare pentru teme WordPress, dreapta?

Pasul 4 Înființați Grunt

Va trebui să aveți instalat Grunt, care în același timp necesită Node.js, dar presupun că deja îl aveți. În mod implicit, Grunt acceptă numai funcționalitatea pentru fișierele JavaScript, dar din fericire există extensii de la terți, cum ar fi grunt-css și grunt-busolă, care pot avea grijă de restul fișierelor de care avem nevoie.

Deci, hai să navigăm la noi src din terminalul nostru și executați următoarele comenzi:

 npm instalează grunt-css npm instalează grunt-busola

Aceasta va instala ambele extensii la nivel local pentru a le putea importa / încărca cu Grunt.

Acum să ne organizăm js pliant:

Am creat un sub-folder numit libs unde putem plasa orice script de terță parte de care avem nevoie, am creat și o script.js fișierul în care vom codifica funcțiile personalizate care se execută de obicei atunci când DOM-ul este gata.

Acum, pentru a configura opțiunile de configurare a lui Grunt, va trebui să creați un nou fișier numit grunt.js, așa că hai să facem unul în noi src dosar cu următorul conținut:

 / * modul global: false * / module.exports = function (grunt) // configurare proiect. grunt.initConfig (meta: versiune: '0.1.0', banner: '/ *! PROJECT_NAME - v<%= meta.version %> - "+"<%= grunt.template.today("yyyy-mm-dd") %>\ n '+' * http://www.yoursite.com/\n '+' * Drepturi de autor (c) <%= grunt.template.today("yyyy") %> '+' Compania ta; Licențiat MIT * / ', wpblock:' / *! \ n '+' Temă de testare \ n '+' Temă URI: http://www.yoursite.com \ n '+' URI autor: http://www.yoursite.com \ n '+' Versiune: 1.0 \ n '+' * / ', scame: files: [' grunt.js ',' ... /js/script.js '], concat: dist: src: ['',' ... /js/libs/*.js ',' ... /js/script.js '], dest:' ... /js/script.min.js ', min: dist: src: '",""], dest:"', cssmin: dist: src: ['',' ... /sass/style.css '], dest:' ... /style.css ', ceas: fișiere: ['',' ... /sass/*.scss '], sarcini:' default ', jshint: opțiuni: curly: true, eqeqeq: true, immed: true, sub: true, undef: true, seful: true, eqnull: true, jquery: true, devel: true, browser: true, globals:  ); // Activitate implicită. grunt.registerTask ("implicit", "lint concat min compass cssmin"); // Compass sarcinile grunt.loadNpmTasks ('grunt-compass'); // sarcini CSS grunt.loadNpmTasks ('grunt-css'); ;

Wow! Este mult mai complex decât dosarul Compass, dar voi face tot posibilul să încerc să-i explic, să citesc din nou documentația oficială a lui Grunt pentru a afla mai multe despre el.

Ce face fișierul de configurare este să-i spuneți lui Grunt să facă următoarele, în ordine, fiecare
timpul pe care îl conducem mormăit comanda de la terminalul nostru din interiorul nostru src pliant:

1. Verificați erorile din site-ul nostru grunt.js și js / script.js fișiere utilizând JSHint.
2. Conectați toate bibliotecile noastre de javascript și scripturile personalizate împreună într-un
   fișier numit script.min.js care este cea pe care o menționăm în nostru functions.php fişier.
3. Minimizați script.min.js fişier.
4. Utilizare groh-busolă pentru a compila foile de stiluri cu ajutorul nostru config.rb fişier.
5. Utilizare groh-css pentru a ne minimiza style.css fișier și plasați noua versiune în dosarul de bază al temei noastre. De asemenea, va prefixa blocul de comentarii pe care l-am setat pe wpblock opțiune pentru foaia de stil astfel încât să poată fi citită de WordPress.

Chiar mai bine, putem fugi Ceasul de grunt în terminalul nostru și va urmări schimbările
în fișierele noastre JavaScript și Sass și executați sarcinile în mod automat. Dulce, huh?

Apropo, Grunt nu doar minifică fișierele javascript prin eliminarea spațiilor libere și a liniilor noi, optimizează scripturile dvs. prin redenumirea unor variabile precum var myLongVariable = adevărat; la var a = adevărat; plus alte tipuri de magie pentru a le face chiar mai mici! Trebuie să recunosc că am fost puțin sceptic față de această caracteristică, dar este de fapt foarte inteligent pentru a vă asigura că nu vă va rupe codul (până acum nu mi-a rupt mina).

groh-busolă nu pot minifica (cel puțin fără a elimina comentariile) și groh-css nu pot citi .SCSS fișiere, de aceea a trebuit să compilam mai întâi fișierele Sass într-un singur fișier .css fişier.

Pasul 5 Configurați scriptul de construire H5BP

Am putea să folosim ceea ce avem până acum și să începem să codificăm tema, dar de ce să ne oprim acum când avem încă șabloane și imagini murdare? Pentru a rezolva acest lucru am modificat scriptul de construire a furnici care a fost folosit împreună cu placa de bază HTML5. Aceasta depinde de asta furnică așa că asigurați-vă că ați instalat-o.

Aceasta este o lungă perioadă de timp și nu vreau să vă plictisesc pe cei care afișează întregul fișier de configurare configurat aici, dar în rezumat de fiecare dată când sunteți gata să vă deplasați tema în lumea reală, trebuie doar să navigați la construi dosar în terminalul nostru și a alerga construcția ant, asta va:

1. Optimizați-ne PNG și JPEG imagini.
2. Optimizați fișierele noastre șablon (index.php, single.php, etc).
3. Eliminați toate dosarele și fișierele inutile (src, sass, etc).

Așadar, în cele din urmă vom ajunge la un nou dosar în dosarul temei de bază numit
publica care va arata astfel:

Toate fișierele tematice sunt pregătite pentru implementare.

Gândurile finale

Deci, acolo aveți, este, în esență, fluxul meu de lucru pentru dezvoltarea temelor. Rețineți că, deși arată foarte mult, trebuie doar să o configurați o dată și să preluați fișierele tematice de bază de fiecare dată când aveți nevoie de ele, astfel încât în ​​cele din urmă trebuie doar să:

1. Obțineți WordPress
2. Preluați fișierele tematice de bază
3. Alerga mormăit sau Ceasul de grunt în terminalul tău

Sunt sigur că există modalități de a-l îmbunătăți, așa că dați-mi voie să știu în comentariile de mai jos, dacă veți găsi ceva interesant pentru a face acest lucru chiar mai bine.

Actualizați: Am realizat câteva corecții minore în fragmentele de cod de mai sus. De asemenea, există acum un link de descărcare la depozitul GitHub pentru acest tutorial, și puteți găsi fișierele complete construite etc..