Grunt

Grunt se define – en su sitio – como un corredor de tareas de JavaScript. Esto quiere decir – de manera general – que grunt utiliza JavaScript para automatizar tareas.

Las tareas que vamos a automatizar son:

1. Concatenar archivos.
2. Minificar archivos.
3. Recargar el documento que se esté visualizando en el navegador.
4. Utilizar jshint.
5. Borrar archivos o carpetas.
6. Ejecutar las pruebas del código de JavaScript utilizando jasmine o qUnit.

Es posible automatizar o realizar más tareas. Puedes revisar la lista de plugins disponibles.

En caso de no encontrar un plugin para la tarea que quieres realizar también puedes escribir tus propios plugins.

Instalar nodejs

grunt es un paquete de nodejs, entonces necesitamos instalar nodejs para poder utilizar grunt.

Aunque es posible instalar nodejs con un administrador de paquetes – homebrew, apt, yum – es más fácil descargar el instalador para la plataforma que estemos utilizando desde la página de descargas de nodejs.

Una vez que descargamos el instalador le damos doble clic y seguimos las instrucciones de instalación.

Instalar grunt-cli

nodejs cuenta con un administrador de módulos llamado npm.

El primer módulo que vamos a instalar es la línea de comandos de grunt – grunt-cli.

Desde la línea de comandos – terminal – tecleamos la siguiente sentencia.

$ npm install -g grunt-cli

El parámetro * -g especifica que la instalación del plugin va a ser de manera global – el paquete se va a instalar en el directorio donde está instalado nodejs -.

* Podemos revisar más parámetros de configuración en la página npm-config.

Una vez que el módulo está instalado, necesitamos tener un proyecto para utilizar grunt.

En este caso va a ser un proyecto que está formado por un documento html con dos hojas de estilo y dos archivos de JavaScript.

Dentro de la carpeta del proyecto creamos un archivo package.json

$ npm init

Al teclear esta sentencia, nodejs realiza una serie de preguntas con referencia al proyecto.
Las respuestas van a ser utilizadas para crear el archivo package.json

Nota:
También es posible crear el archivo package.json manualmente.
Revisa la referencia de los atributos que pueden estar en el archivo package.json.

{
  "name": "demo",
  "version": "0.1.0",
  "private": "true",
  "description": "Crear un paquete json para utilizar grunt",
  "main": "index.html",
  "author": "eamexicano",
  "license": "MIT"
}

En este caso eliminé scripts, keywords y agregué private.

Para definir la versión utilicé versiones semánticas.

Instalar grunt

Ahora instalamos el módulo de grunt como dependencia utilizando el parámetro –save-dev. De esta manera se registra el módulo en el archivo package.json como una de las dependencias de desarrollo – devDependencies -.

$ npm install grunt --save-dev

Si abrimos el archivo package.json podemos observar grunt ya está incluido como dependencia de desarrollo – devDependencies -.

{
  "name": "demo",
  "version": "0.1.0",
  "private": "true",
  "description": "Crear un paquete json para utilizar grunt",
  "main": "index.html",
  "author": "eamexicano",
  "license": "MIT",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

Además se creó una carpeta llamada node_modules donde se almacenan los módulos de node que utilicemos en el proyecto.

Si tenemos un proyecto que tiene dependencias definidas en el archivo package.json podemos instalar las dependencias desde la carpeta del proyecto tecleando

$ npm install

Gruntfile.js

Una vez que grunt está instalado tenemos que crear un archivo Gruntfile.js en la raíz del documento – junto al archivo package.json -.

En este archivo se configuran los diferentes plugins que utilicemos, se definen las tareas y se puede definir un flujo de ejecución para que se ejecuten las tareas en un orden determinado.

/*
  El contenido del archivo Gruntfile.js
  debe de estar dentro del bloque: 
 
  module.exports = function(grunt) {

  };
*/

module.exports = function(grunt) {
  /*  Configuración del proyecto */
  grunt.initConfig({ 
   /* Configuración de los plugins */
  });
  /* Cargar tarea(s) que proveen los plugins utilizados  */
  grunt.loadNpmTasks('nombre-plugin');
  /* Registrar un alias para las tareas o funciones */
  grunt.registerTask("default", ['tarea01', 'tarea02']);
};

En el API de grunt se definen las opciones que se pueden utilizar dentro del módulo de grunt.

Si queremos ejecutar una tarea utilizamos el comando grunt seguido del nombre de la tarea.

$ grunt tarea01

Es posible definir una tarea – o conjunto de tareas – predeterminadas default. Para ejecutar esta(s) tarea(s) solo se tiene que utilizar el comando grunt.

$ grunt

Aunque en este momento no tienen mucha funcionalidad, puedes descargar los archivos del Demo para de instalación de grunt. Son cuatro versiones del mismo proyecto.

1. demo: Versión inicial definida en la parte superior.
2. demo-01: Primer versión del archivo package.json
3. demo-02: Segunda versión del archivo package.json – incluye las dependencias de desarrollo -.
4. demo-02: Incluye el archivo Gruntfile.js

Este proyecto lo vamos a utilizar con las tareas que vamos a automatizar.