Usando Grunt para convertir archivos LESS a CSS.

LESS is More = Menos es Más.

LESS es un lenguaje de hoja de estilo dinámico que luego es compilado a CSS. Este compilador está escrito en JavaScript y es más rápido que sus alternativas, SASS y Stylus.

Hay varios tutoriales de LESS pero para resumir provee de características útiles que no están disponibles en el CSS tradicional, estos son: variables, mixins, reglas anidadas, funciones y operadores. Simplemente escribir CSS es agotador y muy repetitivo.

Compilando LESS

La manera más fácil de compilar archivos LESS es instalando Node.js, hay instaladores disponibles para Max OS X y Windows. En el caso de Linux ver https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager para instrucciones de instalación utilizando administradores de paquetes.

Para descargar el instalador ir a http://nodejs.org/ y descargar el instalador puedes usar el botón “Install” allí o buscar dentro de la página de las descargas la versión para tu sistema operativo.

nodejs

En el caso de Windows 8.1 descarga e instala “node-v0.10.29-x64.msi”.

Una vez instalado abre una ventana de comandos (command prompt) o ejecuta cmd y ubícate en el directorio

c:\Program Files\nodejs

Si lo instalaste en otra ruta cambia a esa ruta entonces.

Tienes que ejecutar las variables de entorno

nodevars.bat

Una vez hecho esto ya puedes ejecutar el comando npm

Si vas a usar LESS con Bootstrap (Twitter Bootstrap) su compilador oficial es RECESS, escrito por Jacob Thornton uno de los creadores de Twitter Bootstrap.

Para instalar RECESS ejecuta el siguiente comando:

npm install -g recess

Para compilar un archivo LESS, navega a la ruta de tu proyecto y ejecuta el siguiente comando:

recess archivo.less --compile > archivo.css

Donde archivo.less es el nombre del archivo LESS que quieres compilar y archivo.css es el nombre del archivo CSS que quieres que genere.

Desafortunadamente los tiempos cambian y desde la versión de Bootstrap 3.1x RECESS ya no podrá compilarlo porque ahora se han pasado a usar grunt-contrib-less.

Por el lado bueno Grunt que es un ejecutador de tareas para Node.js puede hacer muchas cosas más, por ejemplo puede vigilar archivos LESS esperando cambios y compilarlos ni bien cambien e incluso puede volver a cargar el navegador luego de compilar tu archivo LESS.

Aquí viene Grunt.

Hasta el momento has aprendido a utilizar RECESS para compilar LESS a mano. Hay una forma más eficiente para compilar LESS.

Puedes usar Grunt y sus plugins para automatizar la compilación de tus estilos. Grunt puede hacer muchas cosas además de compilar LESS entre ellas: minificar scripts, correr pruebas, optimizar imágenes y mucho más.

Instalar Grunt.

Primero requieres la línea de comando grunt-cli. Si no instalas esto cuando quieras ejecutar grunt te saldrá “grunt: command not found” o no se encontró el comando.

Ejecuta la siguiente línea en la ventana de comandos:

npm install -g grunt-cli

Eso instalará la utilidad de línea de comando de Grunt globalmente en tu sistema.

Luego tienes que instalar Grunt de manera local para tu proyecto:

npm install grunt --save-dev

Cuando le agregas –save-dev al comando le agrega el plugin como una dependencia en el archivo “package.json” (si tienes uno).

Luego tienes que instalar el plugin LESS que te permite poder compilar tus estilos.

npm install grunt-contrib-less --save-dev

Eso es todo lo que necesitas instalar por ahora. Ahora tienes que crear el archivo de configuración Grunt.

Crea un archivo JavaScript, ponle de nombre Gruntfile.js y agrega el siguiente contenido:

module.exports = function (grunt) {
  // Grunt Configuration
  grunt.initConfig({
     less: {
        app: {
           files: {"css/main.css": "/less/main.less"}
        }
     }
});
// Load plugins
grunt.loadNpmTasks("grunt-contrib-less");
};

Para ejecutarlo escribe:

grunt less:app

Configuración para que la compilación sea automática.

Tienes que instalar el plugin watch.

npm install grunt-contrib-watch --save-dev

En el archivo Gruntfile.js tienes que poner lo siguiente:

module.exports = function (grunt) {
  // Grunt Configuration
  grunt.initConfig({
     less: {
        app: {
           files: {"css/main.css": "less/main.less"}
        }
     },
   watch: {
      styles: {
         files: ["less/**/*.less"],
         tasks: ["less:app"],
         options: {spawn: false}
      }
   }
});

// Load plugins
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};

Para que empiece a observar los archivos ejecuta:

grunt watch:styles

En la ventana de comandos verás la siguiente salida:

$ grunt watch:styles
Running "watch:styles" (watch) task
Waiting...OK
>> File "less/main.less" changed.
Running "less/app" (less) task
File css/main.css created
Running "watch:styles" (watch) task
Completed in 0.648s at Thu Jan 02 2014 13:05:57 GMT+0000 (UTC) -
Waiting...

Cada vez que el archivo main.less cambie o cualquier otro archivo en la carpeta LESS la tarea less:app se ejecutará

Usando Grunt para recargar en vivo (Live Reloading)

Refrescará el navegador cuando el plugin watch note un cambio

Abre el archivo Gruntfile.js y agrega la opción livereload al watch plugin (agrega las líneas que te falten)

watch: {
   styles: {
      files: ["less/**/*.less"],
      tasks: ["less:app"],
      options: {
         livereload: true,
         spawn: false
      }
   }
}

Esta opción hará que el plugin watch inicie una recarga del servidor en el puerto por defecto. Puedes especificar un puerto diferente así: livereload: 1337

En el archivo HTML tienes que agregar la siguiente etiqueta:

<script src="http://localhost:35729/livereload.js"></script>

Ten en cuenta el puerto, en este ejemplo es: 35729 en tu caso podría ser distinto.

Esto conectará tu navegador con el servidor.

Solución de problemas.

Grunt: Command not found

Requieres la interfáz de línea de comando:

npm install -g grunt-cli

Unable to find local grunt

Los binarios de Grunt no se pudieron encontrar dentro de los módulos Node de tu proyecto, reinstala grunt localmente.

npm install -save-dev grunt

5 pensamientos en “Usando Grunt para convertir archivos LESS a CSS.”

  1. Genial, muchas gracias! Solo me hubiese sido de ayuda saber cual era la organización de carpetas, ya que la mía es diferente pero con algo de trabajo pude deducirlo. Y por último la opción para Livereload me daba un error al ejecutar grunt, así que comparé la configuración con otro archivo y lo dejé de esta forma:

    watch: {
    options: {
    spawn: false,
    livereload: true
    },
    styles: {
    files: [“less/**/*.less”],
    tasks: [“less:app”],
    options: {spawn: false}
    }
    }
    });

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s