O melhor ambiente de desenvolvimento WordPress

Nos últimos dois anos, escrevi muitos tutoriais aqui no WPMU DEV Blog nos quais compartilho dicas sobre os ambientes de desenvolvimento que uso.

Então, hoje, achei que era hora de compartilhar um ambiente completo, do tipo que eu montaria e usaria para desenvolvimento em larga escala.

Arregace as mangas e prepare-se para sujar as mãos! Porque abaixo está um passo a passo completo do tipo de ambiente de desenvolvimento que configurei e como você pode fazer isso também.

Nota: Este tutorial não é para iniciantes. Se você é novo no desenvolvimento do WordPress, não precisará de um ambiente tão elaborado, pois pode introduzir complexidade desnecessária. Observe também que este artigo destina-se especificamente ao WordPress. As ideias e os objetivos podem ser os mesmos para projetos que não sejam do WordPress, mas a abordagem e as ferramentas usadas variam.

Índice

1. 1. O que faz um bom ambiente de desenvolvimento
   2. Ambientes em evolução
   3. Servidores locais
   4. Ferramentas de linha de comando
   5. Scripts Bash
   6. Plug-ins do WordPress
   7. Ferramentas diversas

O que faz um bom ambiente de desenvolvimento?

A meu ver, um bom ambiente de desenvolvimento tem as três propriedades a seguir:

1. Altamente portátil
2. Altamente configurável
3. Altamente automatizado

Portabilidade

A portabilidade é um fator importante porque além de compartilhar o tema/plugin que estou desenvolvendo quero poder compartilhar o ambiente dev também.

Quero que outros desenvolvedores possam verificar a fonte do GitHub e começar imediatamente, incluindo o uso de ferramentas como Gulp ou Grunt. Isso torna os projetos fáceis de entrar e, se você apoiar uma melhor colaboração, terá uma chance maior de fazer algo bem-sucedido.

A portabilidade também pode ajudá-lo se você precisar trabalhar em outro computador ou quiser mostrar aos seus colegas o que está fazendo. A capacidade de configurar as coisas em qualquer lugar em poucos minutos me ajudou mais vezes do que posso contar.

Configurabilidade

A capacidade de configurar seu ambiente é fundamental. No lado do servidor, o WordPress é extremamente tolerante, mas ser capaz de ajustar suas configurações de compilação, tarefas do Grunt e outras opções é um grande benefício.

As opções de configuração e a portabilidade juntas significam que você pode testar seu trabalho facilmente em diferentes circunstâncias. Que tal trocar a versão do PHP ou mesmo HHVM só para ter certeza? Talvez você possa verificar a compatibilidade com versões mais antigas do WordPress e plugins populares? Estas são coisas que você deve ser capaz de testar.

Automação

A automação é um dos principais impulsionadores na criação de um ambiente de desenvolvimento para o trabalho do WordPress. Não quero me preocupar com meus scripts, folhas de estilo, salvar meu trabalho, implantação e assim por diante.

As ferramentas de linha de comando formam a espinha dorsal do meu conjunto de automação, que pode fazer tudo, desde configurar o WordPress com um comando até empacotar meu produto.

Um trabalho em andamento

Antes de nos aprofundarmos nos detalhes, pensei em sair pela tangente sobre como os ambientes de desenvolvimento são sonhados por quem os usa.

Se você é relativamente novato no mundo da linha de comando, ferramentas de construção, sistemas de controle de versão e outros enfeites, pode parecer que eu sou o profissional que sabe tudo e usa as ferramentas perfeitas para cada tarefa.

Isso está bem longe da verdade! Eu sou bem versado em todas as coisas do WordPress, mas todo o resto é apenas um extra que eu acrescentei ou precisei/queria aprender para tornar minha vida mais rápida. Copiei outros, descobri bits por conta própria e modifiquei as coisas conforme necessário (às vezes falhando miseravelmente!).

Meu ambiente de desenvolvimento (e muitos outros) é uma mistura do seguinte:

• Conhecimento pessoal bem apurado
• Ótimas dicas de outras pessoas
• Apenas alguma coisa aleatória que encontrei que funciona
• Passos que poderiam ser feitos muito melhor, mas eu não me incomodei em descobrir

Em outras palavras: não é perfeito, mas faz o trabalho. Há muito espaço para melhorias e lugares para usar outras ferramentas, das quais você pode gostar mais. Se você conhece ferramentas ou fluxos de trabalho mais úteis, sinta-se à vontade para usá-los e deixe-me saber nos comentários!

Um servidor local

O WordPress é executado em PHP, que é uma linguagem de codificação do lado do servidor, portanto, precisamos de um servidor para executar o WordPress. As opções mais populares são:

• Vagabundo
• WAMP
• XAMPP
• MAMP

Comecei com o XAMPP anos e anos atrás. Então mudei para o MAMP quando me tornei um usuário de Mac e, eventualmente, mudei para o Vagrant cerca de dois anos atrás. A web e as ferramentas usadas estão evoluindo como sempre e agora costumo usar o Vagrant e o MAMP também. Vou explicar o porquê abaixo.

AMP

O “AMP” em MAMP, XAMPP e WAMP significa Apache, MySQL e PHP. Todas essas ferramentas instalam serviços e uma GUI para ajudá-lo a gerenciar os processos usados ​​pelo servidor. Você baixa e instala o aplicativo, pressiona o botão “on” e tudo funcionará conforme o esperado.

Os prós:
É rápido, fácil, intuitivo e funcionará em todos os sistemas o tempo todo. Ele possui uma ótima interface de usuário, que você pode usar para ajustar as configurações do PHP, alternar para o Nginx, configurar o Memcached, Postfix, configurar servidores virtuais e muito mais.

Os contras:
Embora existam muitas coisas que você pode ajustar, o controle é limitado. Você não pode alterar o sistema operacional ou fazer outras alterações que o acesso SSH completo permitiria.

Todos os AMPs perdem a portabilidade pelo mesmo motivo. Eles são populares o suficiente para que qualquer um possa instalá-los, mas não são autocontidos e mínimos como as configurações do Vagrant.

Vagabundo

Vagrant é um pouco diferente. Em vez de pré-embalagem e ambiente para você, ele oferece controle total. Ele é construído sobre o VirtualBox (ou outros aplicativos de VM) e permite que você pegue uma “caixa”, que é essencialmente um sistema operacional. Você pode usar scripts para configurá-los por conta própria.

Os prós:
A configuração é independente em apenas dois arquivos muito pequenos. Se você está acostumado com a linha de comando, configurar um ambiente pode ser tão simples quanto vagrant up – o sistema é extremamente portátil.

Você pode configurá-lo para o conteúdo do seu coração. Qualquer sistema operacional, qualquer software, desde diferentes métodos de cache até compilar seu próprio PHP. Você pode replicar exatamente o ambiente do seu host real para garantir que seu site seja executado exatamente da mesma maneira em sua máquina local.

Os contras:
Se você não está atualizado no uso da linha de comando, o Vagrant pode ter uma curva de aprendizado íngreme. Quando tudo funciona sem problemas, tudo o que você precisa fazer é emitir um comando. Se algo se recusar a funcionar, por qualquer motivo, você se encontrará em águas profundas.

Existem ferramentas para criar hosts virtuais e realizar outras tarefas comuns, a UI do MAMP é mais conveniente, pelo menos para mim. Se eu precisar de um novo host virtual rápido com um WP para instalar, posso fazê-lo com MAMP + WP-CLI muito mais rápido do que com Vagrant + WP-CLI.

Qual Usar?

Se você trabalha exclusivamente com o WordPress, uma ferramenta como o MAMP oferece flexibilidade e poder mais do que suficientes. Ele permite que você trabalhe com sites que não sejam WordPress, é claro, portanto, se você tiver um trabalho estranho que esteja fora da esfera WP, o MAMP ainda o servirá bem.

Se você trabalha com grandes equipes em projetos que não são do WP, recomendo pegar o Vagrant e experimentá-lo. Ele ensinará muito sobre como os servidores funcionam internamente e permitirá que você compartilhe ambientes com exatidão.

Minha preferência é usar os dois. Quando preciso (ou tenho tempo), posso configurar meu ambiente nos mínimos detalhes com o Vagrant. Quando preciso de algo simples ou para um projeto WordPress, o MAMP é minha opção preferida.

Rachel McCollin, outra escritora aqui no WPMU DEV, escreveu um ótimo guia sobre como configurar o MAMP e eu contribuí com um Guia para o Desenvolvimento do WordPress com Vagrant, que você pode usar para configurar esses ambientes.

Ferramentas de linha de comando

Eu não uso um grande número de ferramentas CLI, mas as que eu uso são uma grande parte do meu fluxo de trabalho. Os mais proeminentes são WP-CLI, Gulp, ngrok e Ultrahook, vamos entrar em detalhes.

WP-CLI

WP-CLI é uma ferramenta de linha de comando extremamente poderosa, que permite automatizar tudo sobre o WordPress. Eu já escrevi um tutorial sobre desenvolvimento avançado do WordPress com WP-CLI, então vou mostrar um pouco da mágica que ele pode fazer.

Configurando novos sites

Você pode baixar, configurar e instalar o WordPress em alguns comandos simples, como wp core download e wp core config . A documentação é abundante e fácil de seguir.

Eu uso WP-CLI junto com scripts bash para criar pequenos modelos para a criação de novos sites. Você pode usar comandos para remover plugins e temas padrão e baixar e ativar plugins que você usa regularmente.

Pesquisar e substituir

Pesquisa e substituições de banco de dados às vezes são necessárias, mas podem ser uma dor. Mudar para https, mudar para um novo domínio, renomear urls e outros podem trazer algumas mudanças em massa.

Como o banco de dados contém vários arrays serializados, você não pode apenas pesquisar e substituir o SQL (a menos que o valor antigo e o novo tenham o mesmo comprimento). wp search-replace oldval newvalue resolverá tudo isso para você, desserializando e re-serializando suas matrizes.

Administração Remota

O WP-CLI possui SSH integrado para ajudá-lo a gerenciar sites por SSH. Isso tem o potencial de permitir que você gerencie centenas de sites com um único comando (por exemplo: atualizar um tema ou plugin em vários sites).

Muito mais…

Quase não há fim para o que você pode fazer com o WP-CLI. De cerca de 35 categorias de comando integradas, que contêm vários subcomandos para pacotes de terceiros, você pode automatizar facilmente qualquer tarefa.

Gole

Gulp é meu carro-chefe de automação. Eu o uso para gerenciar meus scripts, estilos, imagens, até mesmo testes móveis e mecânicas de atualização do navegador. Eu escrevi um artigo extenso sobre como usar o Gulp With WordPress, dê uma olhada lá para obter instruções detalhadas.

Eu prefiro o Gulp à outra escolha popular – Grunt – por causa das diferenças de sintaxe. Dê uma olhada no meu artigo Grunt For WordPress Development e decida-se!

O Gulp usa pacotes Node e Node para sua funcionalidade, tornando-o extremamente portátil e poderoso, devido às extensões orientadas pela comunidade. Meu processo de trabalho com o Gulp geralmente envolve o seguinte:

1. Encontre uma extensão que atenda às minhas necessidades
2. Instale o pacote do nó com npm
3. Requer o pacote no Gulpfile
4. Escreva uma pequena tarefa de automação

A única parte disso que requer qualquer pensamento é o número quatro. Mesmo assim, a maioria das extensões tem exemplos de copiar e colar que provavelmente só precisarão ser modificados um pouco.

Aqui estão as extensões que mais uso:

• gulp-sass para compilar Sass para CSS
• gulp-clean-css para minificar CSS
• gulp-autoprefixer para adicionar prefixos de fornecedores automaticamente
• gulp-include para concatenar arquivos JS
• gulp-uglify para minfying de arquivos JS
• gulp-imagemin para otimizar imagens
• Browsersync para criar servidores dev que ajudam nos testes móveis
• gulp-sourcemaps para criar mapas de origem para arquivos minificados

grok

O ngrok é uma pequena ferramenta de serviço e linha de comando que uso para compartilhar meu trabalho local pela Internet. O ngrok cria túneis seguros para um ambiente local, expondo seu aplicativo em uma URL especial como http://7bbc49aa.ngrok.io .

Ultragancho

Ultrahook é uma espécie de inverso do ngrok. Onde o ngrok roteia seu localhost para a web, o ultrahook roteia a web para seu localhost. Isso é extremamente útil para testar APIs de terceiros como o Stripe, por exemplo.

Você pode configurar o Stripe para enviar webhooks de teste http://stripe.danielpataki.ultrahook.com que serão passados ​​com segurança para o seu servidor local.

Plug-ins do WordPress

Para a maioria de nós, o desenvolvimento do WordPress é sinônimo de desenvolvimento de plugins e temas. O repositório está cheio de plugins que ajudam os desenvolvedores a criar um trabalho melhor mais rápido. Aqui estão alguns que eu uso ou uso regularmente.

Verificação de Tema

Um plugin obrigatório para criadores de temas. O Theme Check analisará seu tema e mostrará os motivos pelos quais ele não atende aos padrões do WordPress. Ele analisa código obsoleto, arquivos estranhos, práticas ruins, erros comuns e muitos outros problemas em potencial.

Campos personalizados avançados

Advanced Custom Fields ou ACF é o meu plugin favorito de todos os tempos. Ele permite que os desenvolvedores criem belos campos personalizados para seus temas e plugins em uma interface de usuário intuitiva e rápida. Quando terminar, você pode ocultar o ACF completamente e colar o código PHP gerado em seu trabalho para manter os campos intactos. Um plugin bem executado e extremamente útil!

Monitor de consultas

O Query Monitor permite que você veja exatamente o que está acontecendo em seu ambiente WordPress do ponto de vista de acesso ao banco de dados. Você pode capturar consultas potencialmente lentas ou redundantes antes que elas sejam lançadas em um produto ativo e otimizar as existentes para tornar seu código muito mais rápido.

Scripts Bash

Os scripts Bash contêm vários comandos que são executados um após o outro e podem ser usados ​​para automatizar ainda mais as tarefas. Por exemplo, já é fácil instalar o WordPress com WP-CLI. Tudo o que é preciso é o seguinte:

Esses comandos devem ser emitidos um após o outro, o que leva um pouco de tempo. Colocando isso em um arquivo, vamos chamá-lo de install.sh , você pode criar um modelo para criar uma instalação WP.

Coloque o arquivo na pasta em que deseja criar a instalação e digite bash install.sh . Todos os comandos serão emitidos e em poucos segundos você terá um site funcionando.

Ao adicionar parâmetros, você pode torná-lo ainda mais útil. Se você emitir o comando como este: bash install.sh newsite , você pode usar o parâmetro para preencher o nome do banco de dados, a URL e o título do site.

Os arquivos Bash também podem ser úteis para criar compilações finais (remover pastas e arquivos estranhos, mover diretórios etc.) e outras tarefas semelhantes. Eles podem até ser executados a partir de tarefas do Gulp, o que oferece muita flexibilidade em seu fluxo de trabalho.

Ferramentas Diversas

As extensões do navegador são uma grande ajuda ao testar um site. Aqui estão alguns que eu uso no meu fluxo de trabalho.

Carteiro

Postman é uma extensão do Chrome para construir, testar e documentar APIs. Acho que sempre que preciso fazer uma solicitação rápida para ver como uma API funciona, o Postman é muito mais rápido do que qualquer outra ferramenta.

A capacidade de salvar e gerenciar solicitações é particularmente útil. O teste de API é algo que faço com menos frequência, mas quando chego a isso, ocupa a maior parte do meu dia, usar algo como o Postman torna minha vida muito mais fácil.

Editar este cookie

EditThisCookie é outro exemplo de extensão do Chrome que não uso muito, mas quando o faço, me economiza horas e horas. Ele permite que você veja/limpe/edite os cookies de um único site. Isso é tudo, mas oh meu Deus, como pode ser útil!

Tempo de carregamento da página

O tempo de carregamento da página faz o que você pensa, analisa o carregamento da página. Ele pode entrar em detalhes importantes como DNS/Solicitação e tempos de resposta, mas o que eu gosto é que ele mostra o tempo de carregamento geral ali mesmo na barra de ferramentas. Super útil para comparações rápidas.

Formatador JSON

Minha entrada final de extensão do navegador na categoria de ferramentas diversas é o JSON Formatter, que detecta quando uma resposta é simplesmente uma string JSON e formata tudo de forma agradável e adequada, em vez de apenas colocar um bloco de texto.

Franz

Este realmente não tem nada a ver com desenvolvimento! Franz é uma ferramenta que pode agregar vários serviços da web sob o mesmo teto. Os aplicativos My Messenger, Slack, Skype, Inbox by Gmail, Trello, Google Calendar e Todoist são executados em uma janela em vez de seus aplicativos nativos.

Tudo parece exatamente como se eu os executasse em seus ambientes usuais, mas não preciso ter todos esses ícones e posso alternar entre eles mais facilmente. Menciono Franz porque me ajudou a me concentrar mais e ao mesmo tempo me comunicar melhor.

VVV

Variar Vagrant Vagrants ou VVV para abreviar é uma configuração Vagrant de código aberto para desenvolvimento para WordPress e o próprio WordPress. Ele contém todas as ferramentas necessárias para começar, incluindo compilações de desenvolvimento do WordPress.

Muito mais!

Há tantas ferramentas que não mencionei, principalmente porque simplesmente não as uso. São ótimas ferramentas, mas eu simplesmente não as conheço, não preciso delas ou não se encaixam no meu fluxo de trabalho. Aqui está uma pequena lista de algumas grandezas que você deve dar uma olhada:

• Sublinhados para um ótimo padrão de tema feito pelo departamento de temas do WordPress
• Raízes para uma pilha inteira do WordPress, incluindo servidor, gerenciamento de aplicativos e tema inicial. Acho isso muito elaborado para o meu gosto, mas pode ser o seu beco.
• WordPress Plugin Boilerplate para desenvolvimento de plugins orientados a objetos padronizados.

Torne seu ambiente de desenvolvimento seu

Em conclusão, essas são as ferramentas que eu uso – elas podem não ser necessariamente as mais adequadas para você, nem são as mais adequadas para todas as situações. Essa configuração é flexível o suficiente para minhas necessidades, então, por favor, reserve um tempo para pesquisar opções e criar um fluxo de trabalho que pareça certo para você.

Boa sorte!

• desenvolvimento