Introducción al gestor de tareas javascript GruntJS para compilar archivos LESS a CSS
LESS es un lenguaje que sirve para generar archivos en formato CSS. La principal ventaja es que facilita el desarrollo de nuevas funcionalidades a los diseñadores. Permitiendo el uso de funciones (conocidos como mixins), importar archivos y operaciones matemáticas entre otras.
Los navegadores solo saben procesar archivos CSS es por eso que debemos convertir los LESS a CSS utilizando las herramientas que instalaremos a continuación.
Primero hay que instalar NodeJS que se puede descargar desde la página oficial http://node.org. Una de las cualidades de NodeJS es que trae una herramienta llamada npm (node package manager), que permite instalar otras aplicaciones o dependencias.
Una vez instalado Node, crearemos un archivo llamado package.json. Este archivo gestionará los paquetes que necesitaremos para poder compilar less. El contenido de este archivo es el siguiente:
Podéis modificar el contenido del archivo con vuestros datos, pero lo más importante son las devDependencies que indican que necesitaremos instalar Grunt y Grunt-contrib-less.
Una vez guardado el archivo, abrimos la linea de comandos y en la misma ruta donde lo hayamos guardado y ejecutamos el comando:
Este comando instalará las dependencias citadas anteriormente.
GruntJS es un gestor de tareas que sirve para automatizar trabajo repetitivo. Para que compilen los archivos less, creamos un archivo llamado Gruntfile.js e introducimos el siguiente código:
Tendremos que configurar las rutas definiendo un path base, que será la ruta del directorio principal de donde tengamos los css, y luego, al configurar LESS, pondremos la ruta del archivo css que saldrá compilado y la ruta de los archivos less de origen que queremos compilar.
Finalmente, para generar los archivos CSS, desde la linea de comandos escribiremos:
Se generaran los archivos CSS. Opcionalmente hemos puesto que se compriman y minimizen los archivos de manera que ocupen menos espacio cuando los subamos a internet.