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
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