L'ambiente di sviluppo WordPress definitivo

Negli ultimi due anni, ho scritto un sacco di tutorial qui sul blog WPMU DEV in cui condivido curiosità sugli ambienti di sviluppo che utilizzo.

Quindi oggi ho pensato che fosse giunto il momento di condividere un ambiente completo, del tipo che avrei messo insieme e utilizzato per uno sviluppo su larga scala.

Rimboccati le maniche e preparati a sporcarti le mani! Perché di seguito è riportata una panoramica completa del tipo di ambiente di sviluppo che ho impostato e di come puoi farlo anche tu.

Nota: questo tutorial non è per principianti. Se non conosci lo sviluppo di WordPress, non avrai bisogno di un ambiente così elaborato in quanto potrebbe introdurre complessità non necessarie. Tieni inoltre presente che questo articolo è pensato specificamente per WordPress. Le idee e gli obiettivi potrebbero essere gli stessi per i progetti non WordPress, ma l'approccio e gli strumenti utilizzati potrebbero variare.

Sommario

1. 1. Ciò che rende un buon ambiente di sviluppo
   2. Ambienti in evoluzione
   3. Server locali
   4. Strumenti della riga di comando
   5. Script di Bash
   6. Plugin WordPress
   7. Strumenti vari

Cosa rende un buon ambiente di sviluppo?

Ai miei occhi un buon ambiente di sviluppo ha le seguenti tre proprietà:

1. Altamente portatile
2. Altamente configurabile
3. Altamente automatizzato

Portabilità

La portabilità è un fattore importante perché oltre a condividere il tema/plugin che sto sviluppando, voglio poter condividere anche l'ambiente di sviluppo.

Voglio che altri sviluppatori possano controllare la fonte da GitHub e iniziare subito, incluso l'uso di strumenti come Gulp o Grunt. Ciò rende facile entrare nei progetti e se sostieni una migliore collaborazione hai maggiori possibilità di avere successo.

La portabilità può anche aiutarti se hai bisogno di lavorare su un altro computer o se vuoi mostrare ai tuoi colleghi cosa hai fatto. La possibilità di impostare le cose ovunque in pochi minuti mi ha aiutato più volte di quante ne possa contare.

Configurabilità

La possibilità di configurare il proprio ambiente è fondamentale. Sul lato server, WordPress è estremamente clemente, ma essere in grado di ottimizzare le impostazioni di build, le attività Grunt e altre opzioni è un enorme vantaggio.

Le opzioni di configurazione e la portabilità insieme significano che puoi testare facilmente il tuo lavoro in circostanze diverse. Che ne dici di cambiare versione PHP o anche HHVM solo per essere sicuro? Forse puoi verificare la compatibilità con le versioni precedenti di WordPress e i plugin popolari? Queste sono cose che dovresti essere in grado di testare.

Automazione

L'automazione è una delle unità principali nella creazione di un ambiente di sviluppo per il lavoro di WordPress. Non voglio preoccuparmi dei miei script, fogli di stile, salvataggio del mio lavoro, distribuzione e così via.

Gli strumenti da riga di comando costituiscono la spina dorsale della mia suite di automazione, che può fare qualsiasi cosa, dalla configurazione di WordPress con un comando al confezionamento del mio prodotto.

Un lavoro in corso

Prima di entrare nei dettagli, ho pensato di fare una tangente su come gli ambienti di sviluppo sono immaginati da coloro che li utilizzano.

Se sei relativamente nuovo nel mondo della riga di comando, degli strumenti di compilazione, dei sistemi di controllo delle versioni e quant'altro, potrebbe sembrare che io sia il professionista che sa tutto e utilizza gli strumenti perfetti per ogni attività.

Questo è abbastanza lontano dalla verità! Sono esperto in tutto ciò che riguarda WordPress, ma tutto il resto è solo qualcosa in più che ho aggiunto o che avevo bisogno/volevo imparare per rendere la mia vita più veloce. Ho copiato gli altri, ho capito dei bit da solo e ho modificato le cose secondo necessità (a volte fallendo miseramente!).

Il mio ambiente di sviluppo (e molti altri) è un mix di quanto segue:

• Conoscenza personale ben affinata
• Ottimi consigli dagli altri
• Solo una cosa casuale che ho trovato che funziona
• Passaggi che potrebbero essere fatti molto meglio, ma non potevo preoccuparmi di capirlo

In altre parole: non è perfetto ma fa il suo lavoro. C'è molto spazio per miglioramenti e posti per usare altri strumenti, che potrebbero piacerti di più. Se conosci strumenti o flussi di lavoro più utili, sentiti libero di usarli e fammi sapere nei commenti!

Un server locale

WordPress funziona su PHP, che è un linguaggio di codifica lato server, quindi abbiamo bisogno di un server per eseguire WordPress. Le opzioni più popolari sono:

• Vagabondo
• WAMP
• XAMPP
• MAMP

Ho iniziato con XAMPP anni e anni fa. Sono poi passato a MAMP quando sono diventato un utente Mac e alla fine sono passato a Vagrant circa due anni fa. Il web e gli strumenti utilizzati si stanno evolvendo come sempre e ora tendo ad utilizzare anche Vagrant e MAMP. Ti spiego perché di seguito.

AMP

"AMP" in MAMP, XAMPP e WAMP sta per Apache, MySQL e PHP. Tutti questi strumenti installano servizi e una GUI per aiutarti a gestire i processi utilizzati dal server. Scarichi e installi l'app, premi il pulsante "on" e tutto funzionerà come previsto.

I pro:
È veloce, facile, intuitivo e funzionerà sempre su tutti i sistemi. Ha un'ottima interfaccia utente, che puoi utilizzare per modificare le impostazioni PHP, passare a Nginx, configurare Memcached, Postfix, configurare server virtuali e altro ancora.

I contro:
Sebbene ci siano molte cose che puoi modificare, il controllo è limitato. Non puoi cambiare il sistema operativo o apportare altre modifiche che l'accesso SSH completo ti consentirebbe di fare.

Tutti gli AMP perdono la portabilità per lo stesso motivo. Sono abbastanza popolari da poter essere installati da chiunque, ma non sono autonomi e minimali come le configurazioni di Vagrant.

Vagabondo

Vagrant è un po' diverso. Invece di preimballaggio e ambiente per te, ti dà il pieno controllo. È basato su VirtualBox (o altre app VM) e ti consente di prendere una "scatola", che è essenzialmente un sistema operativo. È quindi possibile utilizzare gli script per configurarli da soli.

I pro:
La configurazione è autonoma in appena due file molto piccoli. Se sei abituato alla riga di comando, la configurazione di un ambiente può essere semplice come vagrant up : il sistema è estremamente portatile.

Puoi configurarlo a tuo piacimento. Qualsiasi sistema operativo, qualsiasi software, da diversi metodi di memorizzazione nella cache alla compilazione del proprio PHP. Puoi replicare esattamente l'ambiente del tuo host reale per assicurarti che il tuo sito funzioni esattamente allo stesso modo sul tuo computer locale.

I contro:
Se non sei al passo con l'utilizzo della riga di comando, Vagrant può avere una curva di apprendimento ripida. Quando tutto funziona senza intoppi, tutto ciò che devi fare è emettere un comando. Se qualcosa si rifiuta di funzionare, per qualsiasi motivo, ti ritroverai in acque profonde.

Esistono strumenti per creare host virtuali ed eseguire altre attività comuni, l'interfaccia utente di MAMP è più conveniente, almeno per me. Se ho bisogno di un nuovo host virtuale veloce con un WP da installare, posso farlo con MAMP + WP-CLI molto più velocemente che con Vagrant + WP-CLI.

Quale usare?

Se lavori esclusivamente con WordPress, uno strumento come MAMP offre flessibilità e potenza più che sufficienti. Ovviamente ti consente di lavorare con siti non WordPress, quindi se hai qualche lavoro che non rientra nella sfera del WP, MAMP ti servirà comunque bene.

Se lavori con grandi team su progetti non WP, ti consiglio di prendere Vagrant e provarlo. Ti insegnerà molto su come funzionano i server internamente e ti consentirà di condividere esattamente gli ambienti.

La mia preferenza è usare entrambi. Quando ne ho bisogno (o ho tempo), posso configurare il mio ambiente fino all'ultimo dettaglio con Vagrant. Quando ho bisogno di qualcosa di semplice o per un progetto WordPress, MAMP è la mia opzione preferita.

Rachel McCollin, un'altra scrittrice qui a WPMU DEV, ha scritto un'ottima guida su come configurare MAMP e ho contribuito a una guida allo sviluppo di WordPress con Vagrant, che puoi utilizzare per configurare questi ambienti.

Strumenti della riga di comando

Non utilizzo un numero enorme di strumenti CLI, ma quelli che uso costituiscono una parte importante del mio flusso di lavoro. I più importanti sono WP-CLI, Gulp, ngrok e Ultrahook entriamo in un piccolo dettaglio.

WP-CLI

WP-CLI è uno strumento da riga di comando estremamente potente, che ti consente di automatizzare tutto ciò che riguarda WordPress. Ho già scritto un tutorial sullo sviluppo avanzato di WordPress con WP-CLI, quindi ti mostrerò solo alcune delle magie che può fare.

Creazione di nuovi siti

Puoi scaricare, configurare e installare WordPress in pochi semplici comandi come wp core download e wp core config . La documentazione è abbondante e facile da seguire.

Uso WP-CLI insieme agli script bash per creare piccoli modelli per la creazione di nuovi siti. Puoi utilizzare i comandi per rimuovere plug-in e temi predefiniti e scaricare e attivare i plug-in che usi regolarmente.

Cerca e sostituisci

A volte sono necessarie ricerche e sostituzioni nel database, ma possono essere una seccatura. Il passaggio a https, il passaggio a un nuovo dominio, la ridenominazione degli URL e altro possono comportare alcune modifiche di massa.

Poiché il database contiene un numero di array serializzati, non puoi semplicemente eseguire una ricerca SQL e sostituirla (a meno che il vecchio e il nuovo valore non abbiano la stessa lunghezza). wp search-replace oldval newvalue risolverà tutto per te, annullando la serializzazione e quindi ri-serializzando i tuoi array.

Amministrazione remota

WP-CLI ha SSH integrato per aiutarti a gestire i siti su SSH. Questo ha il potenziale per consentirti di gestire centinaia di siti con un singolo comando (ad esempio: aggiornare un tema o un plug-in su più siti).

Molto di più…

Non c'è quasi fine a ciò che puoi fare con WP-CLI. Da circa 35 categorie di comandi integrate, che contengono una serie di sottocomandi a pacchetti di terze parti, puoi automatizzare facilmente qualsiasi attività.

Sorso

Gulp è il mio cavallo di battaglia dell'automazione. Lo uso per gestire i miei script, stili, immagini, anche i test mobili e le meccaniche di aggiornamento del browser. Ho scritto un ampio articolo sull'uso di Gulp con WordPress, dai un'occhiata lì per istruzioni dettagliate.

Preferisco Gulp all'altra scelta popolare – Grunt – a causa delle differenze di sintassi. Dai un'occhiata al mio articolo Grunt per lo sviluppo di WordPress e prendi una decisione!

Gulp utilizza i pacchetti Node e Node per le sue funzionalità, rendendolo estremamente portatile e potente, grazie alle estensioni guidate dalla community. Il mio processo di lavoro con Gulp di solito prevede quanto segue:

1. Trova un'estensione adatta alle mie esigenze
2. Installa il pacchetto del nodo con npm
3. Richiedi il pacchetto nel Gulpfile
4. Scrivi una breve attività di automazione

L'unica parte di questo che richiede un minimo di riflessione è il numero quattro. Anche in questo caso, la maggior parte delle estensioni ha esempi di copia-incolla che probabilmente dovranno essere modificati solo un po'.

Ecco le estensioni che utilizzo di più:

• gulp-sass per la compilazione di Sass in CSS
• gulp-clean-css per minimizzare CSS
• gulp-autoprefixer per aggiungere automaticamente i prefissi dei fornitori
• gulp-include per concatenare i file JS
• gulp-uglify per minificare i file JS
• gulp-imagemin per l'ottimizzazione delle immagini
• Browsersync per la creazione di server di sviluppo che aiutano con i test mobili
• gulp-sourcemaps per la creazione di mappe di origine per file minimizzati

ngrok

ngrok è un piccolo servizio e uno strumento da riga di comando che utilizzo per condividere il mio lavoro locale su Internet. ngrok crea tunnel sicuri in un ambiente locale, esponendo la tua applicazione su un URL speciale come http://7bbc49aa.ngrok.io .

Ultragancio

Ultrahook è un po' il contrario di ngrok. Laddove ngrok instrada il tuo localhost al web, ultrahook instrada il web al tuo localhost. Questo è estremamente utile per testare API di terze parti come Stripe, ad esempio.

Puoi impostare Stripe per inviare webhook di prova http://stripe.danielpataki.ultrahook.com che verranno passati in modo sicuro al tuo server locale.

Plugin WordPress

Per la maggior parte di noi, lo sviluppo di WordPress è sinonimo di sviluppo di plugin e temi. Il repository è pieno di plugin che aiutano gli sviluppatori a creare lavori migliori più velocemente. Eccone alcuni che uso o che uso regolarmente.

Controllo del tema

Un plug-in indispensabile per i creatori di temi. Theme Check analizzerà il tuo tema e sputerà i motivi per cui non soddisfa gli standard di WordPress. Esamina codice deprecato, file estranei, pratiche scorrette, errori comuni e tonnellate di altri potenziali problemi.

Campi personalizzati avanzati

Advanced Custom Fields o ACF è il mio plugin preferito in assoluto. Consente agli sviluppatori di creare bellissimi campi personalizzati per i loro temi e plugin in un'interfaccia utente intuitiva e veloce. Una volta terminato, puoi nascondere completamente ACF e incollare il codice PHP generato nel tuo lavoro per mantenere intatti i campi. Un plugin ben eseguito ed estremamente utile!

Monitoraggio delle query

Il Query Monitor ti consente di vedere esattamente cosa sta succedendo nel tuo ambiente WordPress da un punto di vista di accesso al database. Puoi intercettare query potenzialmente lente o ridondanti prima che escano in un prodotto attivo e ottimizzare quelle esistenti per rendere il tuo codice molto più veloce.

Script di Bash

Gli script Bash contengono una serie di comandi che vengono eseguiti uno dopo l'altro e possono essere utilizzati per automatizzare ulteriormente le attività. Ad esempio, è già facile installare WordPress con WP-CLI. Tutto ciò che serve è il seguente:

Questi comandi devono essere emessi uno dopo l'altro, il che richiede un po' di tempo. Inserendo questo in un file, chiamiamolo install.sh , puoi creare un modello per creare un'installazione WP.

Posiziona il file nella cartella in cui desideri creare l'installazione e digita bash install.sh . Verranno emessi tutti i comandi e in pochi secondi avrai un sito attivo e funzionante.

Aggiungendo parametri puoi renderlo ancora più utile. Se immetti il ​​comando in questo modo: bash install.sh newsite puoi utilizzare il parametro per compilare il nome del database, l'URL e il titolo del sito.

I file Bash possono anche essere utili per creare build finali (rimuovere cartelle e file estranei, spostare directory, ecc.) e altre attività simili. Possono anche essere eseguiti da attività Gulp che ti offre molta flessibilità nel tuo flusso di lavoro.

Strumenti vari

Le estensioni del browser sono di grande aiuto durante il test di un sito. Eccone alcuni che utilizzo nel mio flusso di lavoro.

Postino

Postman è un'estensione di Chrome per la creazione, il test e la documentazione delle API. Trovo che ogni volta che ho bisogno di scattare una rapida richiesta per vedere come funziona un'API, Postman è molto più veloce di qualsiasi altro strumento.

Particolarmente utile è la possibilità di salvare e gestire le richieste. Il test delle API è qualcosa che faccio meno frequentemente, ma quando ci riesco, occupa gran parte della mia giornata, usare qualcosa come Postman mi rende la vita molto più semplice.

Modifica questo cookie

EditThisCookie è un altro esempio di estensione di Chrome che non utilizzo molto, ma quando lo faccio mi fa risparmiare ore e ore. Ti permette di vedere/cancellare/modificare i cookie di un singolo sito. Questo è tutto, ma oh mio Dio, quanto può essere utile!

Tempo di caricamento della pagina

Il tempo di caricamento della pagina fa quello che penseresti, analizza il caricamento della pagina. Può entrare in dettagli importanti come DNS/Richiesta e tempi di risposta, ma quello che mi piace è che mostra il tempo di caricamento complessivo proprio lì nella barra degli strumenti. Super pratico per rapidi confronti.

Formattatore JSON

La mia voce finale dell'estensione del browser nella categoria degli strumenti vari è JSON Formatter, che rileva quando una risposta è semplicemente una stringa JSON e la formatta in modo corretto e corretto invece di ritagliare un blocco di testo.

Franz

Questo in realtà non ha nulla a che fare con lo sviluppo! Franz è uno strumento in grado di aggregare una serie di servizi web sotto lo stesso tetto. Le app My Messenger, Slack, Skype, Inbox by Gmail, Trello, Google Calendar e Todoist vengono eseguite tutte in un'unica finestra anziché nelle loro app native.

Sembra tutto esattamente come se li avessi eseguiti nei loro soliti ambienti, ma non ho bisogno di avere tutte quelle icone e posso passare da uno all'altro più facilmente. Cito Franz perché mi ha aiutato a concentrarmi di più e allo stesso tempo a comunicare meglio.

VVV

Varying Vagrant Vagrants o VVV in breve è una configurazione Vagrant open source per lo sviluppo per WordPress e WordPress stesso. Contiene tutti gli strumenti necessari per iniziare, comprese le build di sviluppo di WordPress.

Molto di più!

Ci sono così tanti strumenti che non ho menzionato, principalmente perché semplicemente non li uso. Sono ottimi strumenti, ma semplicemente non li ho usati, non ne ho bisogno o non si adattano al mio flusso di lavoro. Ecco una breve lista di alcune meraviglie a cui dovresti dare un'occhiata:

• Punti di sottolineatura per un ottimo boilerplate a tema realizzato dal dipartimento dei temi di WordPress
• Radici per un intero stack di WordPress inclusi server, gestione delle applicazioni e tema iniziale. Trovo che sia troppo elaborato per i miei gusti, ma potrebbe essere la tua scelta.
• WordPress Plugin Boilerplate per lo sviluppo di plugin standardizzati orientati agli oggetti.

Personalizza il tuo ambiente di sviluppo

In conclusione, questi sono gli strumenti che utilizzo: potrebbero non essere necessariamente la soluzione migliore per te, né la soluzione migliore per ogni situazione. Questa configurazione è abbastanza flessibile per le mie esigenze, quindi per favore prenditi il ​​tempo necessario per ricercare le opzioni e creare un flusso di lavoro che sia adatto a te.

In bocca al lupo!

• sviluppo