Desarrollo web

Flujo de trabajo en WordPress con Gulp

Unos de los factores que impacta directamente el flujo de trabajo al desarrollar un tema en WordPress es la automatización. Con ella mejoramos todo el proceso de producción y logramos resultados más óptimos y eficientes.

Parte de esta optimización reside en cumplir ciertos objetivos y tareas que se deben considerar para que un proyecto web cumpla con los estándares de velocidad y rendimiento. Esto es vital para el desafío 100/100, donde se identifican tareas como optimización de imágenes, minificación, unificación y compilación de archivos, entre otros procesos. Todos contribuyen a la experiencia de usuarios y posicionamiento en los buscadores, creando un sitio optimizado y eficiente en velocidad de carga.

Estamos conscientes de que estas tareas son repetitivas y consumen tiempo. Ese tiempo se extenderá de proyecto a proyecto si no utilizas las herramientas adecuadas que te permitan agilizar y automatizar estas tareas. Es en este momento donde entra Gulp.

Gulp es un build system, o sistema de construcción, basado en node.js y npm. Es utilizado para automatizar todas las tareas comunes durante el desarrollo, no importa si eres back-end o front-end o cumples los dos roles. Si hoy no quieres realizar todas estas tareas manualmente, es momento que aprendas a usar Gulp.js. Si ya lo sabes, nuestro flujo de trabajo podría servirte también.

Porque Gulp es nuestro automatizador especial

Antes de empezar quisiera nombrarte algunas características que hacen a Gulp especial. ¿Por qué lo elegimos ante otros automatizadores de tareas existente en el mercado?.

• Es fácil de entender
• Tiene una sintaxis basada en javascript a diferencia de otros automatizadores que utiliza JSON
• Es el más eficiente, tareas que se compilaban en 12 segundos con otros automatizadores, con Gulp se redujeron a 350 milisegundos.
• Es el más descargado por lo tanto tiene una comunidad más amplia.
• Su configuración no solo hace fácil escribir las tareas sino también leer y mantener.

Gulp dentro de un tema en WordPress

Ahora sí dejemos la teoría atras y vámonos a la práctica. ¿Cómo usar Gulp en la creación de un tema personalizado en WordPress? Este es nuestro CMS (sistema de gestión de contenidos) preferido para el desarrollo de sitios web.

¿En que nos enfocaremos?

• Unificación, minificación, optimización del CSS y compilación de Sass : En pocas palabras comprimimos todos los estilos en un solo archivo y prefijamos las propiedades de manera que sea compatible con todos los navegadores.
• Unificación y minificación de javascript personalizado y de terceros instalados con bower: Hacemos lo mismo con el Javascript. Unificamos y minimizamos todo el Javascript en un único archivo y verificamos errores de sintaxis.
• Optimización de imágenes: Reducimos al mínimo el tamaño de las imágenes, sin descuidar la calidad.
• Preparar directorio de distribución con todos los archivos optimizados: Esto sirve para crear la versión final del directorio que se ira a producción. También para aligerar espacio en el servidor y que los usuarios no tengan acceso a los archivos de versión en desarrollo.
• Prueba de diseño sincronizado entre navegadores en diferentes dispositivos: para asegurarnos que el diseño deseado se mantenga en todos los dispositivos y navegadores, hacemos este tipo de pruebas.

Estructura de Archivos

Para desarrollar nuestros temas, primero definimos una arquitectura. En ella están los archivos necesarios que dan soporte al sistema jerárquico requerido por WordPress para la personalización y construcción de las páginas. También hay otros directorios donde distribuimos todas funcionalidades para personalizar y otras para facilitar y agilizar el desarrollo del mismo.

Entre los que tenemos están:

• Assets: Aquí guardamos todos los recursos que le darán vida a nuestro tema: archivos css, javascripts, imágenes, fuentes etc, todos en versión de desarrollo para luego procesarlos y pasarlos al directorio de distribución.
• Dist: Aquí se mantiene la versión final de los archivos de assets ya procesados, optimizados y compilados. Es donde se ubica prácticamente todos los archivos que se cargaran en la página.
• Custom:Aquí se guarda todas las funcionalidades personalizadas para cada tema, como shortcodes, hooks, filtros, rutas etc.
• Framework: Aquí mantenemos los helpers, funciones que sirven de complementos para la personalización del tema. Normalmente, llevan a cabo tareas que se repiten de proyecto a proyecto, y facilitan la reutilización de código.
• Partials: Es donde guardamos las vistas, pequeños trozos de html que dan oportunidad de ser reutilizados en diferentes partes del temas.
• Bower: Mantenemos todos los componentes y paquetes de terceros administrados con Bower.

En este análisis le daremos énfasis a un archivo ubicado en la raíz, el gulpfile.js, ya que es donde crearemos todas las tareas y configuraciones que Gulp necesita para ponerse en acción.

Una mirada al gulpfile.js

Para entender mejor, explicaré tarea por tarea. Ten en cuenta que al final de la publicacion encontraras la versión completa.

Paso 1: Configurando variables

El primer paso es definir las variables con los directorios y archivos con el que trabajaremos

L#11 Conjunto de directorios que queremos que se inspeccione constantemente para que se ejecute una tarea específica.

L#20 Directorios contenedores de los archivos compilados y procesados.

L#27 Objeto de los archivos que queremos unificar, clasificado por tipo (js y css).

Paso 2: Cargando paquetes.

Lo siguiente es cargar los paquetes que llevarán a cabo todas las tareas discutidas anteriormente.

Los plugins que estamos usando son los siguientes.

• Gulp: se define por sí solo.
• BrowserSyn: Sincroniza nuestra interfaz con nuestro código en tiempo real, de manera que permite testear y automatizar los cambios en múltiples navegadores.
• Gulp Sass: Compila los archivos sass a css
• Source Maps: Crea un mapa de origen de los archivos sass y css.
• AutoPrefixer: Prefija las propiedades css automáticamente para todos los navegadores.
• UglifyCSS: Minifica los archivos css
• UglifyJS: Minifica los archivos js
• ImageMin: Minifica imágenes PNG, JPEG, GIF y SVG
• Rename: Cambia el nombre de archivos fácilmente
• Plumber: Se encarga de evitar que gulp deje de funcionar en caso de un error.
• Concat: Unifica conjuntos de archivos.
• jshint: Detecta errores del javascript.
• watch: Inspecciona cuando un archivo ha sido modificado
• notify: Notifica cuando una tarea ha sido finalizada

Paso 3 : Tarea para la sincronización con el navegador

Vamos a profundizar un poco más y crear algunas tareas increíbles para automatizar nuestro flujo de trabajo. Browsersync es uno de mis complementos favoritos.

Solía ​​tener LiveReload en mi flujo de trabajo, que recargaba la página web cada vez que se editaba y guardaba un archivo. Pero, cuando se introdujo Browsersync, me ayudó a reducir la mitad de las cosas que tenía que hacer para automatizar la sincronización entre diferentes navegadores. Browsersync me ayuda con las siguientes cosas.

• Inyectar cambios en CSS sin que se recargue ninguna página web
• Crea un puerto y configura un túnel a través de una URL pública aleatoria. Esto significa que mis compañeros de equipo pueden acceder a la rama de desarrollo en vivo en mi servidor local en cuestión de minutos.
• Pruebas sincronizadas en diferentes navegadores, donde abro la URL dada en mi escritorio, portátil y móvil para probar las mismas funciones de una sola vez.

Paso 4: Tarea para la compilación de sass

L # 1 –  Inicio la tarea Sass esta se encargará de compilar nuestro codigo sass a css

L # 2 – Proporcionó el origen del archivo sass que quiero compilar, viene siendo el  style.scss presente en ./assets/sass/style.scss

L # 3 – Plumber es iniciado para evitar la rupturas de ejecución, por si existen errores mínimos de css.

L # 4 – Inicio  la creación del archivo mapa de fuente. Un mapa fuente contiene la información del archivo  original que ha sido compilado. Esto significa que, con la ayuda del software apropiado puede depurar fácilmente tu aplicación incluso después de que sus archivos hayan sido optimizados. Las herramientas para desarrolladores de Chrome y Firefox cuenta con la funcionalidad  para leer mapas de fuente.

L #5 Inició la compilación del Sass con formato compacto, puedes leer sobre los formatos Sass aquí

L#13 Prefijo las propiedades css con autoprefixer.

L#14 Renombro el archivo compilado

L# 18 Minifico el archivo compilado

L # 19 Establezco la ubicación donde se guardará el archivo compilado

L# 20 El sourcemaps es creado

L21 # Establezco la ubicación donde se guardará el sourcemaps

L#22 Muestro un mensaje para notificar que la tarea ha sido finalizada

L#23 Le envió a Browsersync un evento de stream para que inyecte el código CSS y no refresque toda la ventana, de esta forma se mantiene el estado de la página y sólo cambian los estilos.

Paso 5 : Tarea para optimizar el javascript

L#1 Inicio la tarea lint esta se encargará de inspeccionar el código javascript para detectar errores.

L#2 Indico el conjunto de archivos que quiero inspeccionar, que vienen siendo todos los js que están dentro del directorio assets/js/, establecido en el objeto vigilant .

L#3 Jshint se ejecuta

L#6 Comienzo la tarea  para el procesamiento del javascript, a la función task le establezco como primer argumento el nombre de la tarea javascript, segundo argumento la tarea dependiente, en este caso link la que establecimos en las líneas anteriores, esto para que se ejecute antes de iniciar la tarea para así detectar los errores previamente.

L#7 Indico los archivos que quiero procesar, establecido en el array filesConcat.javascript donde se le es asignada la variable vigilant.javascript

L#8 Plumber es iniciado

L#9 Inicia la concatenación, la función concat acepta como primer parámetro el nombre del archivo que está siendo procesado.

L#10 Uglify es invocado para que minifique el archivo que está siendo procesado

L#11 Establecemos la ubicación de destino del archivo procesado.

L#12 Muestro un mensaje cuando la tarea ha sido finalizada

L#13 Le envió a Browsersync un evento de stream para que inyecte el código JS creado.

Paso 6: Tarea para optimizar imágenes

L#1 La tarea imagenmin es inicia, esta se encarga de magnificar las imagenes para el tema

L#2 Indico las imagenes que quiero procesar, el valor de vigilant.minse estableció al principio, cuyo patrón indica que lea todos los archivos ubicados en el directorio assets/img/

L#3 Plumber es invocado

L#4 Inicia la minificación de las imágenes

L#8 Indico el destino donde se guardará las imágenes procesadas

L#9 Muestro un mensaje cuando la tarea ha sido finalizada

Paso 7 : Unificando archivos css

L#1 Inicia la tarea concatCss, esta se encargará de unificar el conjunto de archivos establecidos en el array filesConcat.css

L#2 Asigno fileConcat.css como conjunto de archivos que quiero unificar

L#3 El mapa de fuente ha sido iniciado

L#4 La función concat es invocada, e inicia la unificación de archivos, recuerda el argumento que se le pasa es el nombre del archivo que está siendo procesado.

L#5 Uglifycss es invocado para que minifique el archivo que está siendo procesado

L#6 Se establece el destino donde se guarda el archivo procesado

L#7 El sourcemaps es creado

L#8 Se establece el destino donde se guarda el archivo de mapa de fuente

L#9 Muestro un mensaje cuando la tarea ha sido finalizada

L#13 Le envió a Browsersync un evento de stream para que inyecte el código CSS creado.

Gulpfile completo

¿Que opinas?

He descrito mi proceso paso a paso de la forma más clara posible. Me encantaría ver cómo usas Gulp para automatizar el trabajo en WordPress. Si tiene alguna pregunta o sugerencia, házmelo saber en la sección de comentarios.