Subir de nivel en un proyecto de WordPress usando SASS CSS y Gulp

Octubre 03, 2022

Mario

Cuando se trata de hace temas desde 0 en wordpress es posible hacerlo hasta con un editor de text pero si hablamos de herramientas mas modernas y flujo de trabajo mas optimos sin duda hay muchas herramientas que nos pueden ayudar gulp, grunt, webpack , sass, babel, emmet y muchas mas pero en este caso vamos a utilizar Sass y Gulp como ejecutador de tareas como:

Copilar los sass y minificar los sass en un solo archivo css
Copilar y minificar y remover los comentarios de debug en los Js
y mover los archivos a un folder espesifico

Requerimientos

Lo primero es checkiar que version de npm tenemos o si debemos Instalarlo

npm --version

Usualmente se inicia npm en el folder de el tema y alli mismo se pone el gulpfile.js

Creamos el package.json que es para eso usamos el comando’

npm init
touch gulpfile.js

Para instalar Gulp Globalmente corremos

npm install --global gulp-cli

Ahora instalamos gulp local mente como dependecia

npm install --save-dev gulp

Las ventajas de usar Sass

Lo primero es decir que sass es un css pre-procesador ya mucho de lo que hace sass se logra con css nativo pero hay varias cosas que son increiblemente utiles, el nesting, la agilidad que de da cuando usas BEM, el mixing que son funciones, imports. ect.

/* Ejemplo de nesting*/
.button {
	color: white;
	background-color: #37ac37;
	border: 1px solid #37ac37;
	&:hover {
		border: 1px solid #1c791c;
	}
	&--primary {
		border: 1px solid #2fd6d6;
	}
	&--sucess {
		border: 1px solid #3c7e3c;
	}
	&--danger {
		border: 1px solid #7e3c3c;
	}
}

Las ventajas de usar Gulp

Gulp es un automatizador de tareas, similar que grunt, la idea de Gulp es darle tareas donde el automaticamente o por un comando las ejecuta, por ejemplo optimizar las imagenes o fucionar varios js en uno o bien convertir los archivos Sass a css normal y meterlo en algun folder.

para correr gulp en este ejemplo se puede usar gulp o gulp sass tambien se puede hacer gulp watch para que siga vigilando todos los js o todos los sass .

Para este ejemplo tenemos que instalar los diferentes paquetes que utilizaremos

npm i gulp-autoprefixer del gulp-uglify gulp-sourcemaps gulp-uglify-es gulp-concat ulp-clean-css gulp-babel gulp-sass

//gulpfile.js
const { series, parallel, src, dest, watch } = require('gulp');

const prefix = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass')(require('sass'));
const strip = require('gulp-strip-comments');

const themeBasePath = 'web/app/themes/themeName';

const paths = {
	js: themeBasePath + '/src/js/**/*.js',
	sass: themeBasePath + '/src/scss/**/*.scss',
	distCSS: themeBasePath + '/dist/css/',
	distJS: themeBasePath + '/dist/js/',
};

function mainScss() {
	return src(['./src/scss/main.scss'])
		.pipe(sass().on('error', sass.logError))
		.pipe(sourcemaps.init())
		.pipe(cleanCSS())
		.pipe(prefix())
		.pipe(concat('main.min.css'))
		.pipe(sourcemaps.write('.'))
		.pipe(dest(paths.distCSS));
}

function jsBundle() {
	return src(paths.js).pipe(strip()).pipe(babel()).pipe(uglify()).pipe(concat('mainBundle.js')).pipe(dest(paths.distJS));
}

/*--------------------------------
# WATCH
---------------------------------*/
function watchtask() {
	watch(paths.sass, mainScss);
	watch(paths.js, mainJs);
}

exports.default = series(parallel(mainScss, mainJs));
exports.sass = series(parallel(mainScss));
exports.watch = series(parallel(watchtask));

La estructura de carpetas de nuestro tema se verá así:

themeName
├── index.php
├── style.css
└── dist/
│   └── js/
│   	└── bundle.js
│   └── css/
│   	└── main.min.css
│
└── src/
│   └── images/
│   	└── cat.jpg
├── js/
│   └── menu.js
│   └── slider.js
│
└── scss/
│   └── main.scss/
│   	└── homepage.scss

Como vemos aca todos los scss se van a unir y se van a minimizar en un solo archivo llamado main.min.css evitando asi varios llamados al servidor .

Conectarlo a nuestro Wordpress

Ahora veremos como conectarlo a nuestro Wordpress, con esta función ion vamos a poner en cola los stilos en un solo llamado, y los js, ahora bien si los archivos se hace muy pesados es recomendable dividirlo por paginas o blockes o componentes

/**
 * function.php
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name',   get_stylesheet_uri().'/dist/css/style.min.css?defer',    array(), '1.0.0', true );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/dist/js/mainBundle.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Por Ultimo

Lo ultimo lo que nos queda es correr nuestro gulp en el caso de que vamos a seguir trabajando en los archivos scss o js solo corremos

gulp watch