Usar Gulp en Wordpres

En esta ocasión voy a explicar como trabajar con una estructura base de gulp para poder optimizar nuestro trabajo al crear temas para Wordpress.
Es descargar los siguientes archivos del repositorio y agregarlos dentro de la carpeta wp-content/themes/nombreDeSuTema

Nos descargara los siguientes archivos
- Index.php
- Style.css = La hoja de estilo principal. Se requiere contiene el encabezado del tema.
- Header.php = Encabezado de la pagina
- Footer.php = Pie de pagina
- gulpfile.js = Tareas automatizadas
- package.json = Dependencia del proyecto
- screenshot.png = Imagen de portada del tema
- functions.php = archivo para filtrar funciones de wordpress o crear acciones (Hook)
- .gitignore = Aquí podemos agregar archivos o carpetas que queremos omitir en este caso node_modules
- src/ = Archivos de sass, imagenes que queremos optimizar, css de terceros para minificar, js de terceros para minificar y js propio escrito en ES6 o ES5
- src/sass/ = Archivos sass
- src/js/ = Archivos js escrito en ES6 o ES5
- src/jsVendor/ = Archivos js de terceros para minificar
- src/css/ = Css de terceros para minificar
- src/images/ = Carpeta de imágenes que queremos optimizar
Vamos a instalar las dependencia de nuestro archivo package.json, pero antes quiero aclarar que dentro de las dependencias se encuentra el framework bootstrap y una librería para un slider llamada slick. Las dejo para poder hacer pruebas de como trabajar con archivos instalados desde npm o agregados directamente a la carperta src/
Si crees que no necesitas estos archivos los puedes eliminar del package.json antes de instalar
npm i
el otro archivo importante es el gulfile.js donde se encuentran las tareas listas para ser ejecutadas, pero antes de eso vamos a explicar un poco el archivo
En el siguiente código estamos importando todas las dependencias necesarias
Ahora se crea en un objeto con las rutas necesarias y también la ubicación de los archivos que queremos importar
creamos en un objeto las configuraciones de los plugins de gulp
Ahora iniciamos con nuestras tareas, en este vamos a preparar nuestro servidor para poder usar browserSync, voy a indicar las opciones que debes cambiar para su conveniencia
proxy: aquí va la ruta de su sitio cuando ya se esta ejecutando xampp, mamp o cualquier otra herramienta que usas para ejecutar php apache y mysql
port: es con el puerto que usted quiere ejecutar el browerSync
la tarea de sass nos compila & minifica los archivos .scss creando nuestro archivo style.css en la raíz de tema.
la tarea de vendorcss nos compila & minifica los archivos css de terceros que se encuentran ubicados en el objeto creado al comienzo de este archivo. esto nos va a crear un archivo en la carpeta css que esta en la raíz de nuestro tema si no hay ninguna carpeta con ese nombre la creara
la tarea de es6 nos compila & minifica nuestro javascript escrito en ES6 o ES5
la tarea de vendorjs nos compila & minifica los archivos js de terceros que se encuentran ubicados en el objeto creado al comienzo de este archivo. esto nos va a crear un archivo en la carpeta js que esta en la raíz de nuestro tema si no hay ninguna carpeta con ese nombre la creara
La tarea font traspasa las fuentes que se agregaron en el objeto creado al inicio de este archivo, en la carpeta fonts que esta en la raíz de nuestro tema si no hay ninguna carpeta con ese nombre la creara
La tarea image va optimizar todas nuestras imagenes que se encuentren dentro de la carpeta src/images con formato (.png, .jpg, .jpeg, .gif) y las agregara a la carpeta images de la raíz si no hay ninguna carpeta con ese nombre la creara
La tarea revisar es la que esta pendiente que cada vez que se haga un cambio en el sass y el es6 se van a ejecutar la compilación & minificación de cada uno
La ultima tarea es la que nos ayuda que solo con escribir gulp en la consola se ejecute la tarea css, js, server, revisar
Todo el código anterior junto
para dejar mas claro estas son las tareas que debes saber.
Optimizar las imágenes
gulp image
Traspasar las fuentes
gulp fontCompilar & minifcar sass y css de terceros
gulp cssCompilar & minifiar es6 y js de terceros
gulp jsIniciar la tarea del servidor, tarea de css y la del js
gulp
En el siguiente enlace voy a dejar un tema básico que no tienen gran funcionalidad pero sirve para que pueda hacer pruebas, lo descarga y copia dentro de la carpeta wp-content/themes/
lo activa desde el dashboard, Se debe ver de la siguiente manera
