Andersson Mesa
Jul 20, 2017 · 4 min read

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 font

Compilar & minifcar sass y css de terceros

gulp css

Compilar & minifiar es6 y js de terceros

gulp js

Iniciar 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

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade