Tres flujos de trabajo de automatización de desarrollo para agencias de WordPress

Estoy escribiendo este artículo en un momento de calma, reflexionando sobre los flujos de trabajo de automatización que tenemos en nuestra agencia. Como propietario de una agencia y desarrollador, paso innumerables horas jugando con la automatización para ahorrar tiempo y aumentar la productividad.

Aprovechar los flujos de trabajo de automatización del desarrollo es una de las mejores formas de aumentar la productividad en su agencia de WordPress y al mismo tiempo garantizar la calidad del código.

En nuestra agencia, aprovechamos especialmente la automatización en nuestros procesos de codificación. Eso es exactamente lo que explicará este artículo. Si bien no puedo guiarlo a través de los pasos exactos para configurar los procesos de automatización, ciertamente comprenderá bien cómo operan estos flujos de trabajo de automatización y cómo puede configurar sus propios flujos de trabajo.

Para empezar, utilizamos la implementación automatizada basada en GitHub. Al enviar archivos a nuestros servidores en vivo o de ensayo basados ​​en confirmaciones de GitHub, evitamos efectivamente la transferencia de archivos a través de SFTP o SCP y, por lo tanto, todas las trampas que conllevan las transferencias manuales. En particular, si está trabajando con varios desarrolladores o agencias en el mismo proyecto, se beneficiará de las implementaciones automatizadas utilizando su sistema de control de versiones favorito. Usamos el software de código abierto Jenkins para la implementación automatizada.

En segundo lugar, utilizamos un flujo de trabajo automatizado con WPGulp en nuestros procesos de desarrollo de temas y complementos. Con este proceso, podemos estar seguros de que nuestro código se formatea, minimiza, concatena, tiene prefijos y mucho más. Lo guiaré a través de la configuración de WPGulp y la creación de su primer complemento utilizando este flujo de trabajo.

Consulte también los mejores complementos de automatización de WordPress

Finalmente, explicaré cómo configurar el editor de código abierto VS Code para emplear automáticamente los estándares de codificación de WordPress al guardar un archivo PHP. El formato adecuado del código garantiza la legibilidad y ayuda a evitar errores.

Creación de flujos de trabajo de implementación automatizados con Jenkins

Piense en el siguiente escenario.

Tiene varios desarrolladores en varias ciudades (o incluso países) trabajando en el mismo sitio web, cada uno de los cuales implementa código a través de SFTP en el servidor. Incluso si administra el código en un repositorio, la transmisión a través de SFTP facilita la sobrescritura de los cambios de código sin previo aviso.

Los flujos de trabajo de implementación automatizados son una excelente manera de evitar los problemas causados ​​por la sobrescritura de código.

Ahora le mostraré cómo configurar su propio servidor Jenkins y configurar un repositorio de GitHub para implementar automáticamente el código en su servidor al recibir un comando Git PUSH.

Ahora, si bien puede usar Github para la implementación de forma nativa con Cloudways, tener un servidor Jenkins que maneje la implementación le da a su agencia mucha más flexibilidad al escribir e implementar código.

Los casos de uso comunes de Jenkins son:

• Generando documentación PHP sobre la marcha con phpDox
• Integración de herramientas como NodeJS, Grunt, Gulp o Bower en su flujo de trabajo
• Manejo general de los procesos de Integración Continua y Entrega Continua

Comience con la configuración de Jenkins

Para comenzar con Jenkins en su agencia, deberá instalarlo en un servidor con acceso de shell raíz. Es importante que pueda ejecutar scripts e instalar paquetes de software según sea necesario en el servidor.

Una advertencia: poner a Jenkins en funcionamiento no se hace en cinco minutos, pero valdrá la pena.

El primer paso es instalar Jenkins en su servidor. Digital Ocean tiene un buen artículo sobre la instalación de Jenkins en sus servidores Ubuntu, pero puede usar cualquier otro servidor con requisitos coincidentes.

En segundo lugar, deberá configurar su proyecto para Jenkins. Cuando se habla de implementación automatizada, es probable que solo desee implementar el tema o complemento en el que está trabajando actualmente. Básicamente, no agregaría todo el sitio web a un repositorio de Git y lo implementaría con Jenkins. En muchos casos, solo se implementa el tema o complemento en el que está trabajando.

Por lo tanto, querrá configurar sus directorios de trabajo y repositorios de GitHub para que los maneje su nuevo servidor Jenkins. Sin embargo, no voy a sumergirme completamente en este proceso, ya que estaría fuera del alcance de este artículo. En su lugar, le daré una breve descripción general de lo que es necesario y luego le señalaré este fantástico tutorial sobre WebDevStudios, que puede seguir fácilmente.

1. Querrá asegurarse de que Jenkins esté configurado y funcionando.
2. Configure el repositorio de Git según sea necesario (por ejemplo, configure .gitignore correctamente).
3. Instale PHPLoy en su sistema, ya que se encargará de la implementación.
4. Configure un archivo jenkins, que contiene las instrucciones para Jenkins.
5. Agregue la canalización a su servidor Jenkins y pruébelo.

Con este breve resumen, tiene todos los recursos que necesita para comenzar con Jenkins. Créame cuando le digo que le ahorra horas a mi agencia cada semana. Ya no nos preocupamos por las implementaciones de código y podemos monitorear fácilmente las implementaciones para cada proyecto.

Si este proceso le parece demasiado trabajo, está de suerte. Tenemos artículos extensos para procesos de implementación alternativos en el blog de Cloudways.

Lista rápida para ayudarlo a asegurarse de que no se pierda nada

Esta extensa lista cubre todo lo que necesita saber antes de presionar el botón Publicar sitio web.

Acepto los Términos de servicio y la Política de privacidad de Cloudways

CONSIGUELO AHORA

Gracias

La lista de verificación de su sitio web descargable está en camino a su bandeja de entrada.

Configuración de WPGulp para Dev Automation

Otro flujo de trabajo poderoso que nos gusta es usar el marco WPGulp para desarrollar temas y complementos. El colaborador principal de WP, Ahmad Awais, ha creado una buena herramienta que ayuda a acelerar el desarrollo manteniendo una alta calidad del código.

Las razones para usar WPGulp son muchas:

• Entorno de desarrollo mejorado
• Desarrollo de CSS optimizado
• Concatenación, uglificación y minificación de JS
• Optimización de imagen
• Generación de archivos .pot para I18N e I10N

Verá lo que quiero decir cuando lea el readme.txt del repositorio de Github para WPGulp (vinculado arriba). Déjame darte un ejemplo de cómo usamos WPGulp cuando desarrollamos un complemento de WordPress personalizado.

Primero, usamos el generador WPPB para crear el modelo de complemento base. Al usar la misma plantilla de complemento una y otra vez, nos aseguramos de que todos los complementos que desarrollamos parezcan familiares y que cada desarrollador pueda encontrar fácilmente las funciones que está buscando.

A continuación, agregamos WPGulp a la carpeta del complemento. Lo hacemos ejecutando el comando de shell " npx wpgulp " en la carpeta del complemento. Asegúrese de que estén instalados los requisitos previos NodeJS y NPM.

Después de instalar WPGulp en su carpeta de complementos, se le presenta esta salida de línea de comando:

En tercer lugar, configuramos wpgulp.config.js según sea necesario para el proyecto. Este archivo de configuración maneja todas las configuraciones que WPGulp necesita, incluida la URL del proyecto y las rutas a los activos (CSS, JS, imágenes). Afortunadamente, Ahmad ha hecho un trabajo fantástico al comentar el archivo de configuración, por lo que cada configuración es muy clara.

Por último, activamos WPGulp y comenzamos a desarrollar. Simplemente ejecutando " npm start ", podemos comenzar a desarrollar mientras aprovechamos todo el poder de WPGulp.

Si está interesado en integrar WPGulp con el flujo de trabajo de Jenkins descrito anteriormente, todo lo que necesita es modificar su archivo .gitignore para que solo las versiones optimizadas de sus archivos CSS, scripts JS e imágenes obtengan versiones (la ruta a estos archivos es especificado en el archivo wpgulp.config.js).

Aplicación de estándares de codificación WP con VS Code

Por último, hablemos de un tema con el que cada desarrollador tiene una relación especial: el formato de código. Si alguna vez ha leído código escrito por otra persona, es probable que se haya enojado con las cláusulas if / else con sangría incorrecta, los espacios faltantes o las verificaciones de condición que no siguieron el estilo de Yoda.

En nuestra agencia, utilizamos la herramienta de código abierto VS Code para escribir nuestro código. Anteriormente usamos PHPStorm, pero descubrimos que VS Code ofrece mucha más flexibilidad y facilidad de uso.

WordPress ha implementado estándares de codificación y mejores prácticas, y por una buena razón. Con cientos de miles de desarrolladores en el ecosistema, es obligatorio estructurar el código al menos de manera similar siguiendo ciertos estándares.

Sin embargo, como seres humanos, tenemos una capacidad de memoria limitada. Y recordar los estándares de codificación ciertamente no es el mejor uso de esa capacidad (creo que debería reservarse para cosas que no se pueden automatizar). Para ayudarlo a liberar espacio en su memoria y ahorrar tiempo mientras formatea el código, puede hacer que VS Code formatee automáticamente su código según los estándares de codificación de WordPress.

La configuración depende de su sistema operativo, pero es bastante sencilla. Para Mac, puede seguir el excelente tutorial de Jason. Para los usuarios de Windows, aquí hay una buena explicación. Y para los usuarios de Linux, existe esta guía de Tom McFarlin.

Básicamente, la implementación de los estándares de codificación WP en VS Code se basa en dos cosas:

• Niffer de códigos PHP
• El conjunto de reglas de estándares de codificación WP (a menudo denominado "wpcs")

PHP Codesniffer es una herramienta para modificar código PHP (como ya habrá adivinado), que puede vincular con el conjunto de reglas para los estándares de codificación WP y agregar como una extensión en VS Code.

Luego, solo necesita decirle a VS Code qué conjunto de reglas aplicar a su código PHP y si debe aplicarlo al escribir o al guardar un archivo. Nuestra preferencia es que PHP Codesniffer se ejecute al guardar, ya que puede resultar bastante abrumador cuando lo ejecuta mientras escribe el código. La captura de pantalla a continuación muestra un ejemplo de la configuración de PHP que usamos en nuestra configuración de VS Code.

¿Ya está utilizando alguno de estos flujos de trabajo en la vida diaria de su agencia? ¿O tienes implementadas diferentes rutinas? ¡Déjame saber abajo en los comentarios! Si tiene alguna pregunta sobre la implementación de los procesos descritos, no dude en dejar un comentario; me complace participar y brindar ayuda adicional.