Mantener CSS compilado fuera de tu repositorio git al usar LESS/SASS con Grunt y hooks

Ten un repositorio git ordenado y liviano al excluir los CSS compilados y regenerarlos automáticamente con Grunt y hooks de git.

Una de las desventajas de trabajar con pre-procesadores (ya sea LESS, SASS u otros) es que los archivos producidos pueden generar mucho ruido en el historial de versiones de tu proyecto, lo que es especialmente crítico si estás compilando a archivos minificados o a varias cascadas a partir de un set de variables.

Por ejemplo, si cambias una variable que define un color utilizado en muchos lugares, tu historial mostrará no solamente ese cambio sino también todas las líneas del CSS donde cambió ese valor. Luego, al revisar cambios anteriores se hace mucho más difícil poder determinar fácilmente cuáles son cambios son relevantes (el cambio en el archivo fuente LESS/SASS) de los que no (todas las líneas modificadas en el CSS resultante).

Por ello, una práctica recomendada es versionar los archivos LESS/SASS pero no el CSS resultante, ya que estos últimos son solamente el producto del proceso de compilación de las fuentes.

Para que tu CSS refleje fielmente los cambios en LESS/SASS, puedes automatizar la compilación con una mezcla de tareas en Grunt y hooks de git.

Continue reading “Mantener CSS compilado fuera de tu repositorio git al usar LESS/SASS con Grunt y hooks”

Generar sprites CSS/LESS automáticamente con Grunt

La utilización de sprites en CSS es una de las técnicas más básicas pero a la vez más necesarias en el desarrollo front-end.

Aunque es posible crear y mantener un sprite de forma manual, te tomará tiempo y esfuerzo que probablemente podría tener un mejor uso (sobre todo cuando tienes que incorporar nuevas imágenes al sprite), por lo tanto qué mejor que automatizar esta tarea con la ayuda de Grunt.

Utilizaremos dos tareas distintas: una para crear un sprite de imágenes en PNG y otra para imágenes vectoriales en SVG, ideales para dispositivos con alta densidad de píxeles.

Continue reading “Generar sprites CSS/LESS automáticamente con Grunt”

Automatizar tareas de traducción de WordPress con Grunt

Grunt es una de esas herramientas que al principio parece un poco intimidante, pero al empezar a utilizarla se hace cada vez más necesaria y adictiva.

Por si aún no lo conoces, Grunt es un programita hecho en javascript sobre node.js que permite automatizar una gran cantidad de tareas, y sirve especialmente para poner a punto la versión en producción de un sitio; por ejemplo: optimizar imágenes, compilar estilos desde LESS a CSS (o Coffeescript a javascript), ejecutar pruebas unitarias, minificar y concatenar estilos y scripts, etc.

Hace algunos posts escribí sobre algunas herramientas de localización para WordPress que ayudan a generar el catálogo de traducciones POT necesario para hacer un tema o plugin traducible a otros idiomas, y que es un excelente ejemplo de tareas en las que Grunt se luce.

Afortunadamente bradyvercher adaptó esas herramientas para trabajar como módulos de Grunt, por lo que podemos utilizar las mismas herramientas de localización “oficiales” de WordPress de forma automática con Grunt.

Continue reading “Automatizar tareas de traducción de WordPress con Grunt”