Sass y Gulp para gestionar y agilizar tus temas de WordPress

Gracias a Gulp y a Sass vamos a poder agilizar y gestionar mucho mejor los temas de WordPress, quizas al comienzo o las primeras veces sea un poco mas tedioso por tener que montar o trabajar de esta forma pero a la larga no querras dejar de usarlo.

Cuando tienes un style.css con muchas lineas de codigo que si la tienda, que si las paginas ,… se vuelve tedioso y pesado encontrar algo. Si divides venceras e iras mucho mas rapido.

Ademas no solo eso podemos automatizar con Gulp y BrowserSync automatizar para que cada vez que realicemos algun cambio en nuestros scss nos actualice el style.css y nos refresque el navegador

Tabla de contenidos

1 Descargando tema de prueba
2 Antes de instalar Gulp
3 Instalar Gulp, Sass y Browser-sync
- 3.1 Ejemplo sencillo para ver el funcionamiento de GULP
- 3.2 ¿Que hemos hecho en realidad ?
4 Configurando gulpfile.js en nuestro tema
- 4.1 Declaración de módulos
- 4.2 Creación de las tareas

Descargando tema de prueba

Para comenzar con el ejemplo vamos a descargarnos de underscore.me un tema y lo meteremos en nuestro WordPress, el tema que queremos debe tener los ficheros Sass para poder hacer las pruebas que queremos asi que es necesario utilizar la opcion avanzada y activar la casilla _sassify, rellenais el formulario y ya lo teneis.

El tema que generemos lo metemos en nuestro WordPress

Antes de instalar Gulp

Lo primero que necesitamos tener instalado es npm en nuestra maquina y para ello tenéis que instalar node.js https://nodejs.org/en/

Una vez que tengamos instalado npm podremos empezar a montar nuestro proyecto.

Podéis probarlo de la siguiente manera, nos vamos a una consola y ponéis

npm --version

Ahora vamos crear el package.json que es donde vamos a indicar o especificar los modulos que vamos a ir agregando. para ello lanzamos

npm init

Y ahora comenzaremos a rellenar unos campos que nos van pidiendo. Aquellos que no sepais los dejais por defecto pero aqui os pongo los mios. A medida que vayamos instalando paquetes se ira actualizando las dependencias del proyecto u otras cosas que queramos manualmente.

{
  "name": "testing-gulp",
  "version": "1.0.0",
  "description": "Testing GULP AND SASS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dcg",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.1.2"
  }
}

Instalar Gulp, Sass y Browser-sync

Nos vamos a una consola o terminal, a la carpeta del proyecto nuestro o donde queramos que se ejecute el gulp así que deberíamos ir a la carpeta de nuestro tema y allí escribimos lo siguiente:

npm install gulp gulp-sass browser-sync --save-dev

Lo que estamos diciéndole es instala gulp , gulp-sass y browser-sync.

gulp – herramienta que nos va a permitir automatizar tareas
gulp-sass – paquete de gulp que nos va a permitir compilar el sass
BrowserSync -Herramienta que nos va a permitir actualizar el navegador por cada cambio que realicemos

Una vez que tengamos instalado eso veréis que tenemos una nueva carpeta en nuestro tema que se llama node_modules y que contiene el código que se ha descargado para funcionar. Nosotros aqui no tocamos nada, solo sirve para que vaya instalando los paquetes como iremos viendo a futuro.

Ejemplo sencillo para ver el funcionamiento de GULP

Para hacer funcionar gulp necesitamos crear un fichero que se llame gulpfile.js . al ejecutar gulp se lanzara lo que hay dentro.

Asi que dentro de nuestro tema nos creamos ese fichero con lo siguiente

var gulp = require('gulp');
 
gulp.task('default', function(){
 
    console.log('holaaaaaaa gulp task...')
 
});

En la consola nos vamos y escribimos gulp y vereis que os mostrara el mensaje que teneis puesto en console.log

¿Que hemos hecho en realidad ?

Al principio declaramos los módulos con

var gulp = require('gulp');

Luego definimos nuestras tareas

gulp.task('default', function(){
 
    console.log('holaaaaaaa gulp task...')
 
});

Configurando gulpfile.js en nuestro tema

Ahora lo que vamos a hacer es crear un fichero gulpfile.js o borrar lo que teníamos y añadir lo siguiente:

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
 
// browser-sync tarea para lanzar el server .
gulp.task('browser-sync', function() {
    //watch files
    var files = [
    './style.css',
    './*.js',
    './*.php'
    ];
 
    //initialize browsersync
    browserSync.init(files, {
    //browsersync with a php server
    proxy: "localhost/umai/dcg/",
    notify: false
    });
});
 
// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
    return gulp.src('sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'))
        .pipe(reload({stream:true}));
});
 
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("sass/**/*.scss", ['sass']);
});

Vamos a ver que hemos hecho:

Declaración de módulos

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');

Creación de las tareas

Por cada tarea que queramos vamos haciendo una gulp.task…

Primero definimos browser-sync, esto nos va a permitir que cada vez que hagamos un cambio en un fichero automáticamente quede reflejado en nuestro navegador. En este caso cada vez que haya una modificación en style.css, en un fichero js o en un fichero php se refrescara el navegador

// browser-sync tarea para lanzar el server .
gulp.task('browser-sync', function() {
    //watch files
    var files = [
    './style.css',
    './*.js',
    './*.php'
    ];
 
    //initialize browsersync
    browserSync.init(files, {
    //browsersync with a php server
    proxy: "localhost/umai/dcg/",
    notify: false
    });
});

Importante: proxy es la ruta donde se va a pintar el navegador, en mi caso localhost/dcg pero debeis poner la vuestra.

En esta segunda tarea se especifican donde tenemos los ficheros de sass

Esta tarea se ejecutara cada vez que haya una modificacion en un fichero _scss esto lo que hara sera genera style.css

// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
    return gulp.src('sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'))
        .pipe(reload({stream:true}));
});

Y por ultimo vamos agregar una tarea por defecto y usaremos watch que va a estar pendiente de cada cambio que hagamos cuando se cera, se modifica un archivo

// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("sass/**/*.scss", ['sass']);
});

Aqui podeis ver el resultado final.

https://github.com/guldoe/gulp-wordpress/blob/master/gulpfile.js