Usar GruntJS para compilar archivos LESS

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:

{
  "name": "nombre",
  "version": "1.0.0",
  "description": "Compilación archivos LESS a CSS",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-less": "^0.12.0"
  }
}

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:

npm install

Este comando instalará las dependencias citadas anteriormente.

¿Qué es GruntJS?

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:

module.exports = function (grunt) {
  // Project configuration
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    path: 'c:/tmp',
    less: {
      development: {
        options: {
          yuicompress: true,
          compress: true
        },
        files: {
          '<%= path %>/ruta-donde-guardaremos-el-css/application.css': [
          '<%= path %>/ruta-archivo-less/application.less']
        }
      }
    }})

    grunt.loadNpmTasks('grunt-contrib-less')
    // Default task(s).
    // task for build. Executed by default when using command 'grunt'
    grunt.registerTask('default', ['less'])
}

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:

grunt

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.