Desarrollo de temas WordPress con Gulp

Gracias a la documentación exhaustiva que nos encontramos en el Codex de WordPress podemos disponer en cualquier momento de gran información acerca de las posibilidades en el desarrollo de temas para WordPress.

En efecto, gracias a la documentación, foros de soporte, y recursos formativos, no necesitamos más que un editor de código y una selección adecuada de elementos gráficos para poner a punto nuestro proyecto creado con WordPress y scorrespondiente tema de diseño y funcionalidades básicas.

De todos modos, en el mundo del desarrollo frontend nos encontramos con posibilidades importantes de automatización para el despliegue de acciones durante el proceso de desarrollo que nos permitirán agilizar el trabajo ahorando tiempo en diferentes tareas, y evitar realizar trabajos repetitivos y que aportan poco valor al propio desarrollo.

Una de esas herramientas es Gulp, y es la que centrará el proceso que vamos a explicar en el siguiente artículo.

¿Qué es Gulp?

Gulp es un sistema construído en JavaScript que permite tomar archivos de origen con instrucciones y transformarlos en versiones optimizadas a nuestro antojo, todo ello en cuestión de segundos.

No no extenderemos aquí en el proceso de instalación de Gulp.js y nos remitiremos a la documentación oficial de la herramienta donde podremos conocer todos los detalles.

Tan solo apuntar que para que podamos ejecutar Gulp.js, necesitaremos previamente haber completado la instalación de Node.js si no lo hubiéramos hecho antes en nuestro equipo.

En el caso que nos ocupa podremos automatizar gracias a Gulp algunas tareas como las siguientes:

• Crear y actualizar nuevos ficheros de plantilla PHP para nuestro tema
• Optimizar las imágenes del diseño
• Compilar ficheros SCSS mediante preprocesadores en un nuevo fichero CSS
• Compilar ficheros JavaScript depurándolos y minificándolos
• Actualizar el navegador en el que estamos trabajando para visualizar los cambios en tiempo real

Configurando el entorno de desarrollo

Necesitaremos disponer de los ficheros de origen para nuestro tema que nos permitirán disponer de los fichero e imágenes sin modificar, para después ser entregados en una suerte de construcción final con los archivos definitivos de nuestro tema.

En este caso, nos resultará interesante trabajar con dos directorios diferenciados. Uno para los ficheros de origen y configuración, y otro para el resultado final, con el fin de que podamos desplegar los cambios realizados utilizando como fuente solamente ese directorio final de archivos definitivos.

Todo ello podría estar englobado dentro de un directorio /themefiles donde podremos añadir toda la información de origen y un directorio /themebuild donde podremos añadir los archivos resultantes del proceso.

Una estructura de directorios interesante para los archivos de origen que podemos utilizar es la siguiente:

• template - para los ficheros PHP originales del tema
• images - para los archivos de imagen
• scss - para los archivos SCSS originales
• js - para los ficheros JS necesarios

Entre esta misma información de origen como también pueden ser las dependencias de Gulp que necesitaremos instalar para arrancar los correspondientes procesos.

Instalando dependencias

Para instalar las dependencias necesarias podemos navegar hasta el directorio /themefiles y ejecutar la siguiente concatenación de órdenes desde la terminal.

npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets

Enlace a Gist

A continuación veremos con más detalle cada una de las dependencias y su objetivo.

Configuración de Gulp

Uno de los pasos más importantes del proceso de preparación es la configuración de Gulp. Tendremos que crear dentro del directorio de origen un archivo gulpfile.js con las variables deseadas.

Este puede ser un buen ejemplo para arrancar:

// Configurar Gulp.js
'use strict';

const

// directorios origen y finales
dir = {
src : 'src/',
build : '/themebuild/'
},

// Gulp plugins
gulp = require('gulp'),
gutil = require('gulp-util'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
deporder = require('gulp-deporder'),
concat = require('gulp-concat'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify')
;

// Browsersync
var browsersync = false;

// PHP ajustes
const php = {
src : dir.src + 'template/**/*.php',
build : dir.build
};

// archivos PHP
gulp.task('php', () => {
return gulp.src(php.src)
.pipe(newer(php.build))
.pipe(gulp.dest(php.build));
});

Enlace a Gist

En este archivo de configuración estamos definiendo las carpetas por defecto, los módulos que deben cargarse y una tarea de actualización de los ficheros PHP del directorio final de construcción del theme.

Si creamos nuevos archivos PHP en el directorio de origen y hacemos correr el siguiente comando, veremos cómo los ficheros de origen se copian el directorio final.

gulp php

Optimización de imágenes

Añadiendo las siguientes órdenes en nuestro fichero gistfile.js podremos añadir un trabajo de optimización de imágenes.

// imagen ajustes
const images = {
src : dir.src + 'images/**/*',
build : dir.build + 'images/'
};

// imagen procesado
gulp.task('images', () => {
return gulp.src(images.src)
.pipe(newer(images.build))
.pipe(imagemin())
.pipe(gulp.dest(images.build));
});

Enlace a Gist

La orden que debemos utilizar desde la terminal para ejecutar este proceso es la siguiente, actualizando así las imágene en el directorio de construcción final:

gulp images

Compilar SCSS

Si trabajamos con SCSS, y concretamente con Sass para procesar nuestras hojas de estilos, podremos automatizar esta tarea, y no depender más de cualquier otro software. En efecto, no podemos procesar directamente este tipo de preprocesadores directamente desde WordPress, motivo por el cual, tendremos que preparar con antelación al fichero style.css para su inclusión entre los archivos finales.

// CSS ajustes
var css = {
src : dir.src + 'scss/style.scss',
watch : dir.src + 'scss/**/*',
build : dir.build,
sassOpts: {
outputStyle : 'nested',
imagePath : images.build,
precision : 3,
errLogToConsole : true
},
processors: [
require('postcss-assets')({
loadPaths: ['images/'],
basePath: dir.build,
baseUrl: '/wp-content/themes/wptheme/'
}),
require('autoprefixer')({
browsers: ['last 2 versions', '> 2%']
}),
require('css-mqpacker'),
require('cssnano')
]
};

// CSS procesado
gulp.task('css', ['images'], () => {
return gulp.src(css.src)
.pipe(sass(css.sassOpts))
.pipe(postcss(css.processors))
.pipe(gulp.dest(css.build))
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

Enlace a Gist

Con esta tarea automatizada de Gulp, podremos gestionar directamente en una sola orden las siguientes tareas automatizadas:

• Preparar las imágenes en primer lugar
• Compilar el código Sass en el archivo de origen
• Generar el archivo style.css en el directorio final
• Preparar la ejecución del refresco automático en LiveReload

Para ello tendremos simplemente que ejecutar la siguiente orden desde la terminal:

gulp css

Compilación de JavaScript

Siguiendo los mismos pasos del proceso anterior podremos lanzar tareas automatizadas para procesar los ficheros JS que necesitemos en el tema WordPress con el que estamos trabajando.

Conseguiremos con el siguiente ejemplo procesar todos los archivos JS incluídos, concatenar los archivos en uno solo y minificar el resultado exportándolo en el directorio de construcción final.

Las líneas que deberemos añadir al archivo de configuración son las siguientes:

// JavaScript ajustes
const js = {
src : dir.src + 'js/**/*',
build : dir.build + 'js/',
filename : 'scripts.js'
};

// JavaScript procesado
gulp.task('js', () => {

return gulp.src(js.src)
.pipe(deporder())
.pipe(concat(js.filename))
.pipe(stripdebug())
.pipe(uglify())
.pipe(gulp.dest(js.build))
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

Enlace a Gist

Para poder lanzar las tareas tendremos que ejecutar el siguiente comando:

gulp js

Si queremos agilizar los procesos anteriormente mencionados y hacer correr cada una de las secciones, podemos definir un nuevo comando que incluya todas las órdenes.

Debemos añadir estas órdenes al final del fichero gulpfile.js

// recopilar acciones
gulp.task('build', ['php', 'css', 'js']);

Enlace a Gist

De este modo podremos añadir un solo comando para hacer correr las tareas relacionadas con ficheros CSS, JS e imágenes.

gulp build

Visualización y refresco automático

Uno de los pasos finales y posiblemente más significativos de todo el proceso, es poder observar los resultados del trabajo directamente en el navegador.

En este primer proceso de configuración podremos lanzar la visualización de los cambios en el navegador cuando realmente se hayan producido, sin tener que salir del editor de código, hacer click en el navegador o accionar el teclado.

// Browsersync ajustes
const syncOpts = {
proxy : 'localhost',
files : dir.build + '**/*',
open : false,
notify : false,
ghostMode : false,
ui: {
port: 8001
}
};

// browser-sync
gulp.task('browsersync', () => {
if (browsersync === false) {
browsersync = require('browser-sync').create();
browsersync.init(syncOpts);
}
});

Enlace a Gist

Ahora podemos añadir una tarea de observación o vigilancia para lanzar Browserwync cuando sea necesario, es decir, cuando se hayan observado cambios en alguno de los ficheros.

Esta información deberá incluirse en el archivo de configuración gulpfile.js en el que venimos trabajando desde el inicio del artículo.

// vigilar archivo
gulp.task('watch', ['browsersync'], () => {

// cambios en archivos
gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {});

// cambios en imagen
gulp.watch(images.src, ['images']);

// cambios CSS
gulp.watch(css.watch, ['css']);

// cambios JavaScript 
gulp.watch(js.src, ['js']);

});

Enlace a Gist

Finalmente podemos añadir una tarea completa que nos complete las acciones anteriores con la observación de los cambios realizados de manera constante para ejecutar nuevas tareas.

// tareas Gulp por defecto
gulp.task('default', ['build', 'watch']);

Enlace a Gist

Simplemente deberemos ejecutar la tarea gulp en la terminal para accionar el resultado final del proceso que nos permita concatenar las tareas automatizadas, más la vigilancia mientras haya cambios y el lanzamiento en el navegador del resultado final.

gulp

Conclusiones

Hemos tratado de dar algunos ejemplos interesantes para poder iniciarnos en las tareas de automatización de tareas en el desarrollo de temas para WordPress.

Es importante en este caso destacar que no sólo nos podemos quedar aquí, existen numerosos repositorios que nos permitirán introducir nuevas tareas o crear acciones más complejas si las necesitamos.

Además, a medida que nos vayamos familiarizando con esta metodología podremos ir creando nuestros propios archivos de configuración de automatizaciones y personalizar al completo el flujo de trabajo.