Mediul de dezvoltare WordPress suprem

În ultimii câțiva ani, am scris o mulțime de tutoriale aici pe blogul WPMU DEV în care împărtășesc informații despre mediile de dezvoltare pe care le folosesc.

Așa că astăzi, m-am gândit că este timpul să împărtășesc un mediu complet, genul pe care l-aș pune împreună și l-aș folosi pentru dezvoltarea la scară mai mare.

Suflecă-ți mânecile și pregătește-te să-ți murdărești mâinile! Pentru că mai jos este o prezentare completă a tipului de mediu de dezvoltare pe care l-am creat și a modului în care o puteți face.

Notă: Acest tutorial nu este pentru începători. Dacă sunteți nou în dezvoltarea WordPress, nu veți avea nevoie de un mediu atât de elaborat, deoarece ar putea introduce o complexitate inutilă. De asemenea, rețineți că acest articol este destinat special pentru WordPress. Ideile și obiectivele ar putea fi aceleași pentru proiectele care nu fac parte din WordPress, dar abordarea și instrumentele utilizate ar varia.

Cuprins

1. 1. Ce face un mediu de dezvoltare bun
   2. Medii în evoluție
   3. Servere locale
   4. Instrumente de linie de comandă
   5. Scripturi Bash
   6. Pluginuri WordPress
   7. Diverse instrumente

Ce face un mediu de dezvoltare bun?

În opinia mea, un mediu de dezvoltare bun are următoarele trei proprietăți:

1. Foarte portabil
2. Extrem de configurabil
3. Extrem de automatizat

Portabilitate

Portabilitatea este un factor important deoarece, pe lângă partajarea temei/plugin-ului pe care îl dezvolt, vreau să pot partaja și mediul de dezvoltare.

Vreau ca alți dezvoltatori să poată verifica sursa din GitHub și să înceapă imediat, inclusiv utilizarea oricăror instrumente precum Gulp sau Grunt. Acest lucru face proiectele ușor de abordat și, dacă susțineți o colaborare mai bună, aveți șanse mai mari de a face ceva de succes.

Portabilitatea vă poate ajuta, de asemenea, dacă trebuie să lucrați pe alt computer sau dacă doriți să le arătați colegilor ce ați făcut. Capacitatea de a configura lucrurile oriunde în câteva minute m-a ajutat de mai multe ori decât pot număra.

Configurabilitate

Capacitatea de a vă configura mediul este primordială. Pe partea de server, WordPress este extrem de îngăduitor, dar posibilitatea de a-ți regla setările de construcție, sarcinile Grunt și alte opțiuni este un beneficiu imens.

Opțiunile de configurare și portabilitatea împreună înseamnă că vă puteți testa munca cu ușurință în diferite circumstanțe. Ce zici de schimbarea versiunii PHP sau chiar HHVM doar pentru a fi sigur? Poate că puteți verifica compatibilitatea cu versiunile mai vechi de WordPress și cu pluginurile populare? Acestea sunt lucruri pe care ar trebui să le puteți testa.

Automatizare

Automatizarea este una dintre principalele motoare în crearea unui mediu de dezvoltare pentru lucrul WordPress. Nu vreau să-mi fac griji cu privire la scripturile, foile de stil, salvarea muncii mele, implementarea și așa mai departe.

Instrumentele din linia de comandă formează coloana vertebrală a suitei mele de automatizare, care poate face totul, de la configurarea WordPress cu o singură comandă până la ambalarea produsului meu.

O lucrare în curs

Înainte de a ne aprofunda în detalii, m-am gândit să merg la o tangentă despre modul în care mediile de dezvoltare sunt concepute de cei care le folosesc.

Dacă sunteți relativ nou venit în lumea liniei de comandă, a instrumentelor de construire, a sistemelor de control al versiunilor și altele, s-ar putea părea că sunt un profesionist care știe totul și folosește instrumentele perfecte pentru fiecare sarcină.

Acest lucru este destul de departe de adevăr! Sunt bine versat în toate lucrurile despre WordPress, dar totul este doar ceva suplimentar pe care l-am folosit sau am avut nevoie/am vrut să învăț pentru a-mi face viața mai rapidă. I-am copiat pe alții, mi-am dat seama pe cont propriu și am modificat lucrurile după cum era necesar (uneori eșuând lamentabil!).

Mediul meu de dezvoltare (și multe altele) este o combinație dintre următoarele:

• Cunoștințe personale bine perfectionate
• Sfaturi grozave de la alții
• Am găsit doar ceva aleatoriu care funcționează
• Pași care ar putea fi făcuți mult mai bine, dar nu m-am deranjat să-mi dau seama

Cu alte cuvinte: nu este perfect, dar face treaba. Există mult loc de îmbunătățire și locuri în care să utilizați alte instrumente, care s-ar putea să vă placă mai mult. Dacă cunoașteți mai multe instrumente sau fluxuri de lucru utile, nu ezitați să le utilizați și să-mi spuneți în comentarii!

Un server local

WordPress rulează pe PHP, care este un limbaj de codare pe partea de server, prin urmare avem nevoie de un server pentru a rula WordPress. Cele mai populare opțiuni sunt:

• Vagabond
• WAMP
• XAMPP
• MAMP

Am început cu XAMPP cu ani și ani în urmă. M-am mutat apoi la MAMP când am devenit utilizator Mac și apoi am trecut la Vagrant în urmă cu aproximativ doi ani. Web-ul și instrumentele folosite evoluează ca întotdeauna și acum tind să folosesc și Vagrant și MAMP. Voi explica mai jos de ce.

AMP-uri

„AMP” în MAMP, XAMPP și WAMP înseamnă Apache, MySQL și PHP. Aceste instrumente instalează toate serviciile și o interfață grafică pentru a vă ajuta să gestionați procesele utilizate de server. Descărcați și instalați aplicația, apăsați butonul „pornit” și totul va funcționa conform așteptărilor.

Profesionistii:
Este rapid, este ușor, este intuitiv și va funcționa pe toate sistemele tot timpul. Are o interfață de utilizator grozavă, pe care o puteți utiliza pentru a modifica setările PHP, a comuta la Nginx, a configura Memcached, Postfix, a configura servere virtuale și multe altele.

Contra:
Deși există multe lucruri pe care le puteți modifica, controlul este limitat. Nu puteți schimba sistemul de operare sau face alte modificări pe care accesul SSH complet vi le-ar permite.

Toate AMP-urile își pierd portabilitatea din același motiv. Sunt suficient de populare încât oricine le poate instala, dar nu sunt autonome și minime, precum configurațiile Vagrant.

Vagabond

Vagrant este puțin diferit. În loc de pre-ambalare și mediu pentru dvs., vă oferă control deplin. Este construit pe VirtualBox (sau alte aplicații VM) și vă permite să luați o „cutie”, care este în esență un sistem de operare. Apoi, puteți utiliza scripturi pentru a le configura singur.

Profesionistii:
Configurația este autonomă în doar două fișiere foarte mici. Dacă sunteți obișnuit cu linia de comandă, configurarea unui mediu poate fi la fel de simplă ca și vagrant up – sistemul este extrem de portabil.

Îl puteți configura după cum doriți. Orice sistem de operare, orice software, de la diferite metode de stocare în cache până la compilarea propriului PHP. Puteți replica mediul actual al gazdei dvs. exact pentru a vă asigura că site-ul dvs. va rula exact în același mod pe mașina dvs. locală.

Contra:
Dacă nu ești la curent cu utilizarea liniei de comandă, Vagrant poate avea o curbă de învățare abruptă. Când totul merge bine, tot ce trebuie să faceți este să dați o singură comandă. Dacă ceva refuză să funcționeze, indiferent de motiv, te vei găsi în apă adâncă.

Există instrumente pentru a crea gazde virtuale și pentru a efectua alte sarcini comune, interfața de utilizare a MAMP este mai convenabilă, cel puțin pentru mine. Dacă am nevoie de o nouă gazdă virtuală rapidă cu un WP de instalat, o pot face cu MAMP + WP-CLI mult mai rapid decât cu Vagrant + WP-CLI.

Pe care să folosiți?

Dacă lucrați exclusiv cu WordPress, un instrument precum MAMP oferă flexibilitate și putere mai mult decât suficientă. Vă permite să lucrați cu site-uri non-WordPress, desigur, așa că dacă aveți o slujbă ciudată care se încadrează în afara sferei WP, MAMP vă va servi în continuare.

Dacă lucrați cu echipe mari pe proiecte non-WP, vă recomand să luați Vagrant și să încercați. Vă va învăța multe despre modul în care serverele funcționează intern și vă va permite să partajați mediile exact.

Preferința mea este să le folosesc pe ambele. Când am nevoie (sau am timp), îmi pot configura mediul până la ultimul detaliu cu Vagrant. Când am nevoie de ceva simplu sau pentru un proiect WordPress, MAMP este opțiunea mea preferată.

Rachel McCollin, un alt scriitor aici la WPMU DEV, a scris un ghid grozav despre cum să configurați MAMP și am contribuit cu un Ghid pentru dezvoltarea WordPress cu Vagrant, pe care îl puteți folosi pentru a configura aceste medii.

Instrumente de linie de comandă

Nu folosesc un număr mare de instrumente CLI, dar cele pe care le folosesc sunt o mare parte a fluxului meu de lucru. Cele mai proeminente sunt WP-CLI, Gulp, ngrok și Ultrahook, să intrăm în câteva detalii.

WP-CLI

WP-CLI este un instrument de linie de comandă extrem de puternic, care vă permite să automatizați totul despre WordPress. Am scris deja un tutorial despre dezvoltarea avansată a WordPress cu WP-CLI, așa că vă voi arăta doar o parte din magia pe care o poate face.

Configurarea site-urilor noi

Puteți descărca, configura și instala WordPress în câteva comenzi simple, cum ar fi wp core download și wp core config . Documentația este abundentă și ușor de urmărit.

Folosesc WP-CLI împreună cu scripturile bash pentru a crea mici șabloane pentru crearea de noi site-uri. Puteți folosi comenzi pentru a elimina pluginurile și temele implicite și pentru a descărca și activa pluginurile pe care le utilizați în mod regulat.

Căutați și înlocuiți

Căutarea și înlocuirea bazelor de date sunt uneori necesare, dar pot fi dureroase. Trecerea la https, mutarea la un domeniu nou, redenumirea adreselor URL și altele pot aduce cu ele unele schimbări în masă.

Deoarece baza de date conține un număr de matrice seriate, nu puteți doar să căutați și să înlocuiți SQL (cu excepția cazului în care valoarea veche și cea nouă au aceeași lungime). wp search-replace oldval newvalue va rezolva toate acestea pentru tine, deserializând și apoi re-serializând matricele.

Administrare de la distanță

WP-CLI are SSH încorporat pentru a vă ajuta să gestionați site-urile prin SSH. Acest lucru are potențialul de a vă permite să gestionați sute de site-uri cu o singură comandă (adică: actualizarea unei teme sau a unui plugin pe mai multe site-uri).

Mult mai mult…

Aproape că nu există niciun sfârșit la ceea ce puteți face cu WP-CLI. De la aproximativ 35 de categorii de comenzi încorporate, care conțin o mulțime de sub-comenzi până la pachete terțe, puteți automatiza cu ușurință orice sarcină.

Înghiţitură

Gulp este calul meu de lucru pentru automatizări. Îl folosesc pentru a-mi gestiona scripturile, stilurile, imaginile, chiar și testele pe dispozitive mobile și mecanica de reîmprospătare a browserului. Am scris un articol amplu despre Utilizarea Gulp cu WordPress, aruncați o privire acolo pentru instrucțiuni detaliate.

Prefer Gulp față de cealaltă alegere populară – Grunt – din cauza diferențelor de sintaxă. Aruncă o privire la articolul meu Grunt For WordPress Development și decide-te!

Gulp folosește pachetele Node și Node pentru funcționalitatea sa, făcându-l extrem de portabil și puternic, datorită extensiilor conduse de comunitate. Procesul meu de lucru cu Gulp implică de obicei următoarele:

1. Găsiți o extensie care se potrivește nevoilor mele
2. Instalați pachetul nod cu npm
3. Solicitați pachetul din Gulpfile
4. Scrieți o sarcină scurtă de automatizare

Singura parte a acestui lucru care necesită orice gândire este numărul patru. Chiar și atunci, majoritatea extensiilor au exemple de tip copy-paste care probabil vor trebui modificate doar puțin.

Iată extensiile pe care le folosesc cel mai mult:

• gulp-sass pentru compilarea Sass la CSS
• gulp-clean-css pentru minimizarea CSS
• gulp-autoprefixer pentru adăugarea automată a prefixelor de furnizor
• gulp-include pentru concatenarea fișierelor JS
• gulp-uglify pentru minfying fișiere JS
• gulp-imagemin pentru optimizarea imaginilor
• Browsersync pentru crearea de servere de dezvoltare care ajută la testarea mobilă
• gulp-sourcemaps pentru crearea de hărți sursă pentru fișierele minimizate

ngrok

ngrok este un serviciu mic și un instrument de linie de comandă pe care îl folosesc pentru a partaja munca mea locală pe internet. ngrok creează tuneluri securizate către un mediu local, expunând aplicația dvs. pe o adresă URL specială, cum ar fi http://7bbc49aa.ngrok.io .

Ultrahook

Ultrahook este un fel de reversul lui ngrok. Acolo unde ngrok direcționează localhost către web, ultrahook direcționează web către localhost. Acest lucru este extrem de util pentru testarea API-urilor terțe, cum ar fi Stripe, de exemplu.

Puteți configura Stripe să trimită webhook-uri de testare http://stripe.danielpataki.ultrahook.com care vor fi transmise în siguranță la serverul dvs. local.

Pluginuri WordPress

Pentru majoritatea dintre noi, dezvoltarea WordPress este sinonimă cu dezvoltarea de pluginuri și teme. Depozitul este plin de plugin-uri care îi ajută pe dezvoltatori să creeze mai rapid lucrări mai bune. Iată câteva pe care le folosesc sau le folosesc în mod regulat.

Verificarea temei

Un plugin obligatoriu pentru creatorii de teme. Theme Check vă va analiza tema și va dezvălui motivele pentru care nu îndeplinește standardele WordPress. Se uită la codul învechit, fișierele străine, practicile proaste, erorile comune și o mulțime de alte probleme potențiale.

Câmpuri personalizate avansate

Advanced Custom Fields sau ACF este pluginul meu preferat din toate timpurile. Le permite dezvoltatorilor să creeze câmpuri personalizate frumoase pentru temele și pluginurile lor într-o interfață de utilizare intuitivă și rapidă. Odată ce ați terminat, puteți ascunde complet ACF și lipiți codul PHP generat în munca dvs. pentru a păstra câmpurile intacte. Un plugin bine executat și extrem de util!

Monitor de interogare

Monitorul de interogări vă permite să vedeți exact ce se întâmplă în mediul dvs. WordPress din punct de vedere al accesului la baza de date. Puteți captura interogări potențial lente sau redundante înainte ca acestea să intre într-un produs activ și să le optimizați pe cele existente pentru a vă face codul mult mai rapid.

Scripturi Bash

Scripturile Bash conțin o mulțime de comenzi care sunt rulate una după alta și pot fi folosite pentru a automatiza în continuare sarcinile. De exemplu, este deja ușor să instalați WordPress cu WP-CLI. Tot ce este nevoie este următorul:

Aceste comenzi trebuie emise una după alta, ceea ce necesită ceva timp. Plasând acest lucru într-un fișier, să-l numim install.sh , puteți crea un șablon pentru crearea unei instalări WP.

Plasați fișierul în folderul în care doriți să creați instalarea și tastați bash install.sh . Toate comenzile vor fi emise și în câteva secunde veți avea un site deschis și funcțional.

Adăugând parametri, îl puteți face și mai util. Dacă lansați comanda astfel: bash install.sh newsite , puteți utiliza parametrul pentru a completa numele bazei de date, adresa URL și titlul site-ului.

Fișierele Bash pot fi, de asemenea, utile pentru crearea versiunilor finale (eliminarea folderelor și fișierelor străine, mutarea directoarelor etc.) și a altor sarcini similare. Pot fi executate chiar și din sarcini Gulp, ceea ce vă oferă multă flexibilitate în fluxul de lucru.

Instrumente diverse

Extensiile de browser sunt de mare ajutor atunci când testați un site. Iată câteva pe care le folosesc în fluxul meu de lucru.

Poştaş

Postman este o extensie Chrome pentru construirea, testarea și documentarea API-urilor. Constat că ori de câte ori trebuie să lansez o solicitare rapidă pentru a vedea cum funcționează un API, Postman este mult mai rapid decât orice alt instrument.

Abilitatea de a salva și gestiona cererile este deosebit de utilă. Testarea API este ceva pe care îl fac mai rar, dar când mă ocup de asta, îmi ocupă cea mai mare parte a zilei, folosind ceva de genul Postman îmi face viața mult mai ușoară.

Editați acest cookie

EditThisCookie este un alt exemplu de extensie Chrome pe care nu o folosesc foarte mult, dar când o fac, mă scutește de ore în șir. Vă permite să vedeți/ștergeți/editați modulele cookie ale unui singur site. Asta e tot, dar oh, cât de util poate fi!

Timp de încărcare a paginii

Timpul de încărcare a paginii face ceea ce credeți, analizează încărcarea paginii. Poate intra în detalii importante precum DNS/Solicitare și timpii de răspuns, dar ceea ce îmi place este că arată timpul general de încărcare chiar acolo în bara de instrumente. Super util pentru comparații rapide.

Formatator JSON

Ultima mea intrare de extensie a browserului în categoria instrumente diverse este JSON Formatter, care detectează când un răspuns este pur și simplu un șir JSON și îl formatează totul frumos și corect în loc să scoată doar un bloc de text.

Franz

Acesta de fapt nu are nimic de-a face cu dezvoltarea! Franz este un instrument care poate agrega o serie de servicii web sub un singur acoperiș. Aplicațiile My Messenger, Slack, Skype, Inbox by Gmail, Trello, Google Calendar și Todoist rulează toate într-o singură fereastră în loc de aplicațiile lor native.

Totul arată exact ca și cum le-am rulat în mediile lor obișnuite, dar nu am nevoie să am toate acele pictograme și pot comuta mai ușor între ele. Îl menționez pe Franz pentru că m-a ajutat să mă concentrez mai mult și să comunic mai bine.

VVV

Varying Vagrant Vagrants sau VVV pe scurt este o configurație Vagrant open-source pentru dezvoltare pentru WordPress și WordPress însuși. Conține toate instrumentele de care veți avea nevoie pentru a începe, inclusiv versiunile de dezvoltare ale WordPress.

Mult mai mult!

Sunt atât de multe instrumente pe care nu le-am menționat, mai ales pentru că pur și simplu nu le folosesc. Sunt instrumente grozave, dar pur și simplu nu am ajuns la ele, nu am nevoie de ele sau nu se potrivesc în fluxul meu de lucru. Iată o listă scurtă a unor măreții pe care ar trebui să le aruncați o privire:

• Subliniere pentru o temă grozavă realizată de departamentul de teme WordPress
• Rădăcini pentru o întreagă stivă WordPress, inclusiv server, managementul aplicațiilor și tema de pornire. Mi se pare prea elaborat pentru gustul meu, dar poate fi pe aleea ta.
• WordPress Plugin Boilerplate pentru dezvoltarea de pluginuri standardizate orientate pe obiecte.

Faceți-vă mediul de dezvoltare al vostru

În concluzie, acestea sunt instrumentele pe care le folosesc – s-ar putea să nu fie neapărat cele mai potrivite pentru dvs. și nici nu sunt cele mai potrivite pentru fiecare situație. Această configurație este suficient de flexibilă pentru nevoile mele, așa că vă rog să vă dedicați timp să cercetați opțiunile și să creați un flux de lucru care vi se pare potrivit.

Noroc!

• dezvoltare