Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Introducción a Grunt: Javascript task runner

 

Hay tres palabras que siempre hay que tener presentes: automatizar, automatizar y automatizar. Toda tarea repetitiva y más aún si la misma nos aleja de nuestra tarea real, es importante encontrar la forma de automatizarla.

Automatizar para ser feliz

Para evitar errores, para evitar hacer cosas repetitivas (aburridas) y para mejorar nuestro proceso de desarrollo, recordemos: automatizar, automatizar y automatizar.

Grunt, el task runner para Javascript.

Hay algunas tareas que casi simpre vamos hacer cuando desarrollemos una aplicación en Javascript:

  • Minificar
  • Correr pruebas
  • Ejecutar inspección de código
  • Generar un paquete
  • Comprimir
  • Compilar

Cualquiera de estas tareas se pueden hacer con Grunt, que básicamente es eso: un ejecutor de tareas, como Ant o como MSBuild, pero para Javascript.

¿Qué necesito instalar?

Antes que nada NodeJs, una vez instalado NodeJs con npm instalamos grunt.

npm install -g grunt-cli

Y listo, ya lo tenemos instalado

Ejemplo simple: minificar.

Típicamente un proyecto con Grunt va a tener dos archivos de configuración

package.json

gruntfile.json

El primero indica las dependencias (por ejemplo los paquetes externos que utilizaremos para nuestras tareas) el segundo la configuración de las tareas.

Un ejemplo del package.json para poder utilizar el paquete de minificación es éste:

{
  "name": "prueba",
  "version": "0.1.0"
}

Vemos que no dice mucho más que el nombre del proyecto y la versión pero dijimos que necesitamos indicar las dependencias, bien, podemos agregarlas a mano o podemos hacer que npm lo haga por nosotros del siguiente modo:

npm install grunt grunt-contrib-uglify --save-dev

En este caso decimos que instale grunt y grunt-contrib-uglify y con –-save indicamos que guarde la configuración en nuestro package.json con dev es decir, que es algo para desarrollo no es necesario para correr el proyecto. Entonces nuestro archivo queda así:

{
  "name": "prueba",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.6.0"
  }
}

Perfecto, cuando alguien necesite correr la aplicación hace npm install y todo se instale automáticamente.

Ahora si, vamos a configurar grunt dentro de gruntfile.js.

module.exports = function (grunt) {
	//configuración de grunt
	grunt.initConfig({
		uglify : { 		//nombre de la tarea, uglify
			build : { 	//nombre de la configuración, es un nombre arbitrario
				src : 'js/*.js',		//archivos origen
				dest : 'package/code.min.js'	//archivo destino
			}
		}
	});
	grunt.loadNpmTasks('grunt-contrib-uglify'); //cargamos el módulo que contiene uglify
};

Como vemos en la descripción del código lo que hacemos es indicar a través del método initConfig nuestra configuración.

uglify es el nombre de la tarea que deseamos correr (la que instalamos con npm antes) y dentro de la misma podemos tener más de una configuración (por ejemplo test, ci, production) en este caso le puse build. Los parámetros src y dest indican qué queremos minificar esto está en la documentación de la tarea

Vamos a la consola y ejecutamos grunt

image

Error. Lo que pasa es que ya que podemos tener muchas tareas tenemos que indicar cuál queremos correr, esto lo podemos hacer así:

grunt uglify

Por supuesto que si no queremos hacer esto cada vez podemos indicar cuál es la tarea por defecto dentro de la configuración

module.exports = function (grunt) {
	//configuración de grunt
	grunt.initConfig({

		uglify : { 		//nombre de la tarea, uglify
			build : { 	//nombre de la configuración, es un nombre arbitrario
				src : 'js/*.js',		//archivos origen
				dest : 'package/code.min.js'	//archivo destino
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-uglify'); //cargamos el módulo que contiene uglify
	grunt.registerTask('default', ['uglify']); //tarea por defecto
};

Ahora hacemos simplemente

grunt

y listo

image

Obtenemos un archivo minificado con el contenido de todos los .js que estaban en el directorio “js”.

Nos leemos en la próxima.

Loading