Este documento describe cómo Grunt puede ser utilizado para automatizar tareas como minimizar, concatenar y compilar CSS y JavaScript en proyectos de desarrollo, y cómo el framework Grunt de 10UP facilita la integración de estas tareas con proyectos de WordPress. También introduce las herramientas LESS y Bower y cómo pueden mejorar la administración de estilos y scripts front-end.

1. WordPress y Grunt
Optimizando el desarrollo de proyectos

2. Grunt
Un automatizador de tareas

3. Automatizador?
• Basado en Node JS - JavaScript
• npm install -g grunt-cli
• Tareas básicas como mignificar, concatenar,
complicar LESS o SASS (el sabor que más les
guste), entre muchas más tareas!

4. LESS
CSS semántico

5. CSS
• .conca{
background-color: #111;
}
• .conca.tenado{
background-color: #111;
color: #CCC;
font-size: 15px;
font-size: 1.5rem;
}

6. LESS
• @variable : #CCC;
• .font-size(@fs){
font-size: unit(@size * 10, px);
font-size: unit(@size, rem);
}
• .conca{
background-color: darken(@color, 90%);
&.tenado{
color: @variable;
.font-size(1.5);
}
}
• .conca.tenado{
color: #CCC;
font-size: 15px;
font-size: 1.5rem;
}

7. Entonces, Grunt…
• package.js
• Gruntfile.js
• Ambos son archivos con estructura de objectos
para configurar los servicios

8. Grunt & WordPress
• 10UP: https://github.com/10up/grunt-wp-theme
• git clone git@github.com:10up/grunt-
wp-theme.git ~/.grunt-init/wp-theme
• grunt-init wp-theme
• npm install

9. Grunt y WordPress: Scaffold

10. 10up, entonces es…
• Viene en 3 sabores
• Minifica y concatena nuestros CSS y Javascript
• Tiene una estructura base de archivos
• Y el Watch configurado…

11. Esto es tiempo ganado…
40 horas versus 60 horas

12. Esto es tiempo ganado…
~20 horas con WooCommerce

13. Y no solo eso!

14. Bower: manejador de
paquetes
• Para uso de scripts en frontend
• Facilita la actualización de recursos
• Es sencillo de utilizar
• bower install <nombre de paquete>

15. @jepser
Preguntas o
comentarios…