Cuando desarrollamos software siempre hay tareas repetitivas, compilar las hojas de estilos, ofuscar el JavaScript, generar la distribución, subir a algún servidor, etc. En este tutorial veremos como instalar Grunt para preparar nuestro código fuente para ser deployado a producción.

Por suerte existen algunos administradores de tareas que nos ayudarán a ser más productivos, es el caso de GRUNT, esta herramienta nos permite programar tareas repetitivas utilizando Node.js, es decir, nosotros podemos escribir tareas usando JavaScript solamente y Grunt se encargará de ejecutarlas.

Ademas existen ya algunas tareas comunes que la comunidad ha estado subiendo, entre las más populares tenemos uglify, concatenate, watch, etc. Puedes ver las tareas más populares directamente en su página web.

Instalar Grunt es extremadamente sencillo, solo necesitas tener instalado Node.js y NPM (el administrador de paquetes de Node), es recomendable actualizar el NPM antes de instalar grunt, esto para asegurarte que descargarás la última versión. 

$ npm update -g npm

Ya que Grunt está basado en Node.js, es buena idea crear un proyecto y definir Grunt como dependencia, de esta manera cuando distribuyamos nuestro proyecto, o trabajemos en equipo, las otras personas podrán usar el NPM para descargar e instalar Grunt con un simple comando.

Para inicializar el proyecto ejecutamos el siguiente comando en la carpeta principal del proyecto.

$ npm init

Este comando te hará algunas preguntas, como el nombre del proyecto, la versión, autor, etc. Una vez que termine la ejecución verás el archivo package.json en tu directorio. 

{
  "name": "Testing",
  "version": "0.0.1",
  "description": "Just testing grunt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Crysfel Villa",
  "license": "MIT"
}

Ahora le vamos a indicar que usaremos Grunt, para eso ejecutamos el siguiente comando.

$ npm install grunt --save-dev

Con eso instalamos localmente Grunt y ademas se agrega a las dependencias de este proyecto, pero dependencias de desarrollo.

A este punto nuestro archivo package.json se verá algo así:

{
  "name": "test2",
  "version": "0.0.0",
  "description": "Just testing grunt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Crysfel Villa",
  "license": "MIT",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

Con esto estamos listos para realizar nuestra primera tarea! Para este ejemplo usaremos una tarea llamada Uglify, que nos permitirá ofuscar nuestro código JS haciéndolo más compacto, esto es genial para hacer deployments a producción. 

Lo primero que debemos hacer es agregar la tarea a las dependencias en el archivo package.json.

{
  "name": "Testing",
  "version": "0.0.1",
  "description": "Just testing grunt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Crysfel Villa",
  "license": "MIT",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Para instalar la nueva dependencia ejecutamos el siguiente comando en el directorio de nuestro proyecto:

$ npm install

Con eso tendremos las nuevas dependencias y estamos listos para ofuscar nuestro código y prepararlo para producción.

Una vez que tenemos nuestro entorno listo necesitamos crear un archivo llamado Gruntfile.js, este archivo es el que definirá las tareas que vamos a ejecutar.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({                            //Step 1
    pkg: grunt.file.readJSON('package.json'),   //Step 2
    uglify: {                                   //Step 3
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {                                  //Step 4
        src: 'src/*.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');  //Step 5

  // Default task(s).
  grunt.registerTask('default', ['uglify']);   //Step 6

};

1. En el primer paso inicializamos la configuración de las tareas a ejecutar, aquí es donde definiremos todas y cada una de ellas, les asignaremos parámetros y configuraciones específicas para nuestro proyecto.
2. En el segundo paso cargamos el json de nuestro paquete, esto es necesario para sacar la información del nombre del proyecto entre otras cosas más.
3. En el paso tres configuramos nuestra única tarea, que en este caso es uglify, esto lo hemos sacado de la documentación de la tarea. Aquí estamos definiendo un banner, que será un comentario que agregaremos al archivo que contiene nuestro build.
4. En el cuarto paso configuramos las carpetas donde está nuestro código fuente a ofuscar, y el lugar donde la tarea generará el archivo con el código fuente ofuscado y listo para subir a producción.
5. En el paso cinco cargamos la tarea de uglify a nuestro script.
6. Por último definimos las tareas a ejecutar, nótese que el método registerTask recibe un arreglo, ahí podemos definir el orden en que necesitamos ejecutar las tareas.

Generalmente es necesario definir varias tareas, y posiblemente algunas dependen de otras, es por eso que es importante definir el orden en que las queremos ejecutar.

En este caso por default usaremos la única tarea que tenemos configurada. Ahora vamos a escribir un archivo en src/index.js con un poco de código JavaScript para probar nuestra tarea.

/**
 * This is my awesome code
 **/
var MyApp = {
    /**
     * This method generates some awesome templates
     */
    sample : function(param1,mySecondParam){
        mySecondParam.myMethod();
    }
}

Por el momento solo tendremos un solo archivo, pero en la realidad podemos tener cientos!! Ahora lo último que nos queda es ejecutar nuestra tarea de la siguiente manera.

$ grunt

Con ese comando se ejecutará la tarea por default, que en nuestro caso es la que ejecuta el build, una vez que la corremos podemos encontrar el archivo build/Testing.min.js  con el siguiente código.

/*! Testing 2014-11-13 */
var MyApp={sample:function(a,b){b.myMethod()}};

Como se puede observar el código esta minimizado, se quitaron los espacios en blanco, los parámetros son de una sola letra, los comentarios se removieron, todo esto hará que nuestro código JavaScript pese menos y por lo tanto se descargue mucho más rápido en ambientes de producción.

Happy Coding!