El entorno de desarrollo definitivo de WordPress

Durante los últimos dos años, he escrito montones de tutoriales aquí en el blog WPMU DEV en los que comparto cositas sobre los entornos de desarrollo que uso.

Así que hoy, pensé que ya era hora de que compartiera un entorno completo, del tipo que reuniría y usaría para un desarrollo a mayor escala.

¡Súbete las mangas y prepárate para ensuciarte las manos! Porque a continuación hay un recorrido completo del tipo de entorno de desarrollo que configuré, y cómo puedes hacerlo tú también.

Nota: este tutorial no es para principiantes. Si es nuevo en el desarrollo de WordPress, no necesitará un entorno tan elaborado, ya que podría presentar una complejidad innecesaria. También tenga en cuenta que este artículo está destinado específicamente para WordPress. Las ideas y los objetivos pueden ser los mismos para proyectos que no sean de WordPress, pero el enfoque y las herramientas utilizadas variarán.

Tabla de contenido

1. 1. Qué hace un buen entorno de desarrollo
   2. Entornos en evolución
   3. Servidores locales
   4. Herramientas de línea de comandos
   5. guiones bash
   6. Complementos de WordPress
   7. Herramientas misceláneas

¿Qué hace un buen entorno de desarrollo?

En mi opinión, un buen entorno de desarrollo tiene las siguientes tres propiedades:

1. Altamente portátil
2. Altamente configurable
3. Altamente automatizado

Portabilidad

La portabilidad es un factor importante porque además de compartir el tema/complemento que estoy desarrollando, también quiero poder compartir el entorno de desarrollo.

Quiero que otros desarrolladores puedan consultar la fuente de GitHub y comenzar de inmediato, incluido el uso de herramientas como Gulp o Grunt. Esto hace que los proyectos sean fáciles de emprender y, si apoya una mejor colaboración, tiene más posibilidades de hacer algo exitoso.

La portabilidad también puede ayudarlo si necesita trabajar en otra computadora o si desea mostrar a sus colegas lo que ha estado haciendo. La capacidad de configurar las cosas en cualquier lugar en unos pocos minutos me ha ayudado más veces de las que puedo contar.

Configurabilidad

La capacidad de configurar su entorno es primordial. En el lado del servidor, WordPress es extremadamente indulgente, pero poder ajustar la configuración de compilación, las tareas de Grunt y otras opciones es un gran beneficio.

Las opciones de configuración y la portabilidad juntas significan que puede probar su trabajo fácilmente en diferentes circunstancias. ¿Qué tal cambiar la versión de PHP o incluso HHVM solo para estar seguro? ¿Quizás pueda verificar la compatibilidad con versiones anteriores de WordPress y complementos populares? Estas son cosas que deberías poder probar.

Automatización

La automatización es uno de los principales impulsores en la creación de un entorno de desarrollo para el trabajo de WordPress. No quiero preocuparme por mis scripts, hojas de estilo, guardar mi trabajo, implementación, etc.

Las herramientas de línea de comandos forman la columna vertebral de mi suite de automatización, que puede hacer de todo, desde configurar WordPress con un comando hasta empaquetar mi producto.

Un trabajo en progreso

Antes de sumergirnos en los detalles, pensé en irme por la tangente sobre cómo los entornos de desarrollo son ideados por quienes los usan.

Si es relativamente nuevo en el mundo de la línea de comandos, las herramientas de compilación, los sistemas de control de versiones y todo eso, puede parecer que soy el profesional que lo sabe todo y usa las herramientas perfectas para cada tarea.

¡Esto está bastante lejos de la verdad! Estoy bien versado en todo lo relacionado con WordPress, pero todo lo demás es solo algo adicional que agregué o necesitaba/quería aprender para hacer mi vida más rápida. Copié a otros, descubrí partes por mi cuenta y modifiqué cosas según fuera necesario (¡a veces fallando miserablemente!).

Mi entorno de desarrollo (y muchos otros) es una combinación de lo siguiente:

• Conocimiento personal bien perfeccionado.
• Grandes consejos de otros
• Solo una cosa al azar que encontré que funciona
• Pasos que podrían hacerse mucho mejor, pero no me molesté en resolverlo.

En otras palabras: no es perfecto, pero hace el trabajo. Hay mucho espacio para mejorar y lugares para usar otras herramientas, que pueden gustarle más. Si conoce más herramientas o flujos de trabajo útiles, siéntase libre de usarlos y hágamelo saber en los comentarios.

Un servidor local

WordPress se ejecuta en PHP, que es un lenguaje de codificación del lado del servidor, por lo que necesitamos un servidor para ejecutar WordPress. Las opciones más populares son:

• Vagabundo
• WAMP
• XAMPP
• MÁMPARA

Empecé con XAMPP hace años y años. Luego me mudé a MAMP cuando me convertí en un usuario de Mac y finalmente me cambié a Vagrant hace unos dos años. La web y las herramientas utilizadas están evolucionando como siempre y ahora tiendo a usar Vagrant y MAMP también. Te explico por qué a continuación.

amperios

El "AMP" en MAMP, XAMPP y WAMP significa Apache, MySQL y PHP. Todas estas herramientas instalan servicios y una GUI para ayudarlo a administrar los procesos utilizados por el servidor. Descarga e instala la aplicación, presiona el botón "encendido" y todo funcionará como se esperaba.

Los profesionales:
Es rápido, es fácil, es intuitivo y funcionará en todos los sistemas todo el tiempo. Tiene una excelente interfaz de usuario, que puede usar para modificar la configuración de PHP, cambiar a Nginx, configurar Memcached, Postfix, configurar servidores virtuales y más.

Los contras:
Si bien hay muchas cosas que puede modificar, el control es limitado. No puede cambiar el sistema operativo ni hacer otros cambios que el acceso SSH completo le permitiría hacer.

Todos los AMP pierden portabilidad por la misma razón. Son lo suficientemente populares como para que cualquiera pueda instalarlos, pero no son autónomos ni mínimos como las configuraciones de Vagrant.

Vagabundo

Vagrant es un poco diferente. En lugar de un preenvasado y un entorno para usted, le brinda un control total. Se basa en VirtualBox (u otras aplicaciones de VM) y le permite tomar una "caja", que es esencialmente un sistema operativo. Luego puede usar scripts para configurarlos usted mismo.

Los profesionales:
La configuración es independiente en tan solo dos archivos muy pequeños. Si está acostumbrado a la línea de comandos, configurar un entorno puede ser tan simple como vagrant up : el sistema es extremadamente portátil.

Puede configurarlo al contenido de su corazón. Cualquier sistema operativo, cualquier software, desde diferentes métodos de almacenamiento en caché hasta compilar su propio PHP. Puede replicar exactamente el entorno de su host real para asegurarse de que su sitio se ejecutará exactamente de la misma manera en su máquina local.

Los contras:
Si no está al día en el uso de la línea de comandos, Vagrant puede tener una curva de aprendizaje pronunciada. Cuando todo sale bien, todo lo que necesita hacer es emitir un comando. Si algo se niega a funcionar, por la razón que sea, te encontrarás en aguas profundas.

Existen herramientas para crear hosts virtuales y realizar otras tareas comunes, la interfaz de usuario de MAMP es más conveniente, al menos para mí. Si necesito un nuevo host virtual rápido con un WP para instalar, puedo hacerlo con MAMP + WP-CLI mucho más rápido que con Vagrant + WP-CLI.

¿Cuál usar?

Si trabajas exclusivamente con WordPress, una herramienta como MAMP ofrece flexibilidad y potencia más que suficientes. Por supuesto, le permite trabajar con sitios que no son de WordPress, por lo que si tiene un trabajo ocasional que queda fuera de la esfera de WP, MAMP aún le servirá bien.

Si trabaja con equipos grandes en proyectos que no son de WP, le recomiendo que tome Vagrant y lo pruebe. Le enseñará mucho sobre cómo funcionan los servidores internamente y le permitirá compartir entornos exactamente.

Mi preferencia es usar ambos. Cuando lo necesito (o tengo tiempo), puedo configurar mi entorno hasta el último detalle con Vagrant. Cuando necesito algo simple o para un proyecto de WordPress, MAMP es mi opción preferida.

Rachel McCollin, otra escritora aquí en WPMU DEV, ha escrito una gran guía sobre cómo configurar MAMP y he contribuido con una Guía para el desarrollo de WordPress con Vagrant, que puede usar para configurar estos entornos.

Herramientas de línea de comandos

No uso una gran cantidad de herramientas CLI, pero las que sí uso son una gran parte de mi flujo de trabajo. Los más destacados son WP-CLI, Gulp, ngrok y Ultrahook, entremos en un pequeño detalle.

CLI de WP

WP-CLI es una herramienta de línea de comandos extremadamente poderosa que le permite automatizar todo sobre WordPress. Ya he escrito un tutorial sobre el desarrollo avanzado de WordPress con WP-CLI, así que te mostraré algo de la magia que puede hacer.

Configuración de nuevos sitios

Puede descargar, configurar e instalar WordPress con unos pocos comandos simples como wp core download y wp core config . La documentación es abundante y fácil de seguir.

Uso WP-CLI junto con scripts bash para crear pequeñas plantillas para la creación de nuevos sitios. Puede usar comandos para eliminar complementos y temas predeterminados y descargar y activar los complementos que usa regularmente.

Buscar y reemplazar

A veces se necesitan búsquedas y reemplazos en la base de datos, pero pueden ser una molestia. Cambiar a https, mudarse a un nuevo dominio, cambiar el nombre de las URL y otros pueden traer consigo algunos cambios masivos.

Dado que la base de datos contiene una cantidad de matrices serializadas, no puede simplemente buscar y reemplazar SQL (a menos que el valor anterior y el nuevo tengan la misma longitud). wp search-replace oldval newvalue resolverá todo eso por usted, deserializando y luego volviendo a serializar sus arreglos.

Administración Remota

WP-CLI tiene SSH incorporado para ayudarlo a administrar sitios a través de SSH. Esto tiene el potencial de permitirle administrar cientos de sitios con un solo comando (es decir, actualizar un tema o complemento en varios sitios).

Mucho más…

Casi no hay fin a lo que puede hacer con WP-CLI. Desde alrededor de 35 categorías de comandos integradas, que contienen un montón de subcomandos para paquetes de terceros, puede automatizar fácilmente cualquier tarea.

Trago

Gulp es mi caballo de batalla de automatización. Lo uso para administrar mis scripts, estilos, imágenes, incluso las pruebas móviles y la mecánica de actualización del navegador. Escribí un artículo extenso sobre el uso de Gulp con WordPress, eche un vistazo allí para obtener instrucciones detalladas.

Prefiero Gulp a la otra opción popular, Grunt, debido a las diferencias de sintaxis. ¡Echa un vistazo a mi artículo de desarrollo de Grunt para WordPress y toma tu propia decisión!

Gulp usa paquetes Node y Node para su funcionalidad, lo que lo hace extremadamente portátil y poderoso, debido a las extensiones impulsadas por la comunidad. Mi proceso de trabajo con Gulp generalmente involucra lo siguiente:

1. Encontrar una extensión que se ajuste a mis necesidades
2. Instale el paquete de nodo con npm
3. Requerir el paquete en el Gulpfile
4. Escribir una tarea de automatización corta

La única parte de esto que requiere algún pensamiento es la número cuatro. Incluso entonces, la mayoría de las extensiones tienen ejemplos de copiar y pegar que probablemente solo necesitarán modificarse un poquito.

Estas son las extensiones que más uso:

• gulp-sass para compilar Sass a CSS
• gulp-clean-css para minimizar CSS
• gulp-autoprefixer para agregar prefijos de proveedores automáticamente
• gulp-include para concatenar archivos JS
• gulp-uglify para minfying archivos JS
• gulp-imagemin para optimizar imágenes
• Browsersync para crear servidores de desarrollo que ayudan con las pruebas móviles
• gulp-sourcemaps para crear mapas fuente para archivos minificados

ngrok

ngrok es una pequeña herramienta de servicio y línea de comandos que utilizo para compartir mi trabajo local a través de Internet. ngrok crea túneles seguros a un entorno local, exponiendo su aplicación en una URL especial como http://7bbc49aa.ngrok.io .

ultragancho

Ultrahook es algo así como el reverso de ngrok. Donde ngrok enruta su host local a la web, ultrahook enruta la web a su host local. Esto es extremadamente útil para probar API de terceros como Stripe, por ejemplo.

Puede configurar Stripe para enviar webhooks de prueba http://stripe.danielpataki.ultrahook.com , que se transmitirán de forma segura a su servidor local.

Complementos de WordPress

Para la mayoría de nosotros, el desarrollo de WordPress es sinónimo de desarrollo de complementos y temas. El repositorio está lleno de complementos que ayudan a los desarrolladores a crear un mejor trabajo más rápido. Aquí hay algunos que uso o uso regularmente.

Comprobación de tema

Un complemento imprescindible para los creadores de temas. Theme Check analizará su tema y escupirá las razones por las que no cumple con los estándares de WordPress. Analiza el código obsoleto, los archivos superfluos, las malas prácticas, los errores comunes y muchos otros problemas potenciales.

Campos personalizados avanzados

Advanced Custom Fields o ACF es mi complemento favorito de todos los tiempos. Permite a los desarrolladores crear hermosos campos personalizados para sus temas y complementos en una interfaz de usuario intuitiva y rápida. Una vez que haya terminado, puede ocultar ACF por completo y pegar el código PHP generado en su trabajo para mantener los campos intactos. ¡Un complemento bien ejecutado y enormemente útil!

Supervisión de consultas

Query Monitor le permite ver exactamente lo que sucede en su entorno de WordPress desde el punto de vista del acceso a la base de datos. Puede detectar consultas potencialmente lentas o redundantes antes de que salgan a un producto en vivo y optimizar las existentes para que su código sea mucho más rápido.

guiones bash

Los scripts de Bash contienen un montón de comandos que se ejecutan uno tras otro y se pueden usar para automatizar aún más las tareas. Por ejemplo, ya es fácil instalar WordPress con WP-CLI. Todo lo que se necesita es lo siguiente:

Estos comandos deben emitirse uno tras otro, lo que lleva un poco de tiempo. Al colocar esto en un archivo, llamémoslo install.sh , puede crear una plantilla para crear una instalación de WP.

Coloque el archivo en la carpeta en la que desea crear la instalación y escriba bash install.sh . Se emitirán todos los comandos y en unos segundos tendrás un sitio en funcionamiento.

Al agregar parámetros, puede hacerlo aún más útil. Si emite un comando como este: bash install.sh newsite , puede usar el parámetro para completar el nombre de la base de datos, la URL y el título del sitio.

Los archivos Bash también pueden ser útiles para crear compilaciones finales (eliminar carpetas y archivos superfluos, mover directorios, etc.) y otras tareas similares. Incluso se pueden ejecutar desde tareas de Gulp, lo que le brinda mucha flexibilidad en su flujo de trabajo.

Herramientas varias

Las extensiones del navegador son de gran ayuda cuando se prueba un sitio. Aquí hay algunos que uso en mi flujo de trabajo.

Cartero

Postman es una extensión de Chrome para crear, probar y documentar API. Encuentro que cada vez que necesito enviar una solicitud rápida para ver cómo funciona una API, Postman es mucho más rápido que cualquier otra herramienta.

La capacidad de guardar y administrar solicitudes es particularmente útil. La prueba de API es algo que hago con menos frecuencia, pero cuando lo hago, ocupa la mayor parte de mi día, usar algo como Postman me hace la vida mucho más fácil.

Editar esta cookie

EditThisCookie es otro ejemplo de una extensión de Chrome que no uso mucho, pero cuando lo hago me ahorra horas y horas. Le permite ver/borrar/editar las cookies de un solo sitio. Eso es todo, pero ¡vaya, qué útil puede ser!

Tiempo de carga de la página

Page Load Time hace lo que piensas, analiza la carga de la página. Puede entrar en detalles importantes como DNS/Solicitud y tiempos de respuesta, pero lo que me gusta es que muestra el tiempo de carga general allí mismo en la barra de herramientas. Súper útil para comparaciones rápidas.

Formateador JSON

La entrada final de mi extensión de navegador en la categoría de herramientas misceláneas es JSON Formatter, que detecta cuando una respuesta es simplemente una cadena JSON y la formatea de manera adecuada en lugar de simplemente desplegar un bloque de texto.

Franz

¡Este en realidad no tiene nada que ver con el desarrollo! Franz es una herramienta que puede agregar varios servicios web bajo un mismo techo. Las aplicaciones My Messenger, Slack, Skype, Inbox by Gmail, Trello, Google Calendar y Todoist se ejecutan en una sola ventana en lugar de sus aplicaciones nativas.

Todo se ve exactamente como si los ejecutara en sus entornos habituales, pero no necesito tener todos esos íconos y puedo cambiar entre ellos más fácilmente. Menciono a Franz porque me ha ayudado a concentrarme más y al mismo tiempo comunicarme mejor.

VVV

Variing Vagrant Vagrants o VVV para abreviar es una configuración de Vagrant de código abierto para desarrollar para WordPress y WordPress mismo. Contiene todas las herramientas que necesitará para comenzar, incluidas las compilaciones de desarrollo de WordPress.

¡Mucho más!

Hay tantas herramientas que no he mencionado, principalmente porque simplemente no las uso. Son excelentes herramientas, pero no las he utilizado, no las necesito o no encajan en mi flujo de trabajo. Aquí hay una lista corta de algunas grandezas que deberías echar un vistazo:

• Guiones bajos para un gran tema repetitivo hecho por el departamento de temas de WordPress
• Raíces para una pila completa de WordPress, incluido el servidor, la administración de aplicaciones y el tema de inicio. Encuentro esto demasiado elaborado para mi gusto, pero puede ser de tu agrado.
• WordPress Plugin Boilerplate para el desarrollo estandarizado de complementos orientados a objetos.

Haga suyo su entorno de desarrollo

En conclusión, estas son las herramientas que uso; es posible que no sean necesariamente las más adecuadas para usted, ni son las más adecuadas para cada situación. Esta configuración es lo suficientemente flexible para mis necesidades, así que tómese el tiempo para investigar opciones y crear un flujo de trabajo que le parezca adecuado.

¡Buena suerte!

• desarrollo