Desde hace algunos meses en Infranetworking estamos trabajando en la nueva versión (v11) de nuestro sitio web público y del backend, integrando nuevas tecnologías e integrándolas a lo que será el nuevo Infranetworking del 2015. Una de esas tecnologías que estamos probando es Grunt JS, por eso hoy vamos a contarles un poco más sobre esta genial librería.
¿Qué es Grunt JS y por qué debería usarlo?
Grunt JS trabaja en conjunto con NodeJS, y es una herramienta que nos permite muchas cosas, pero por sobre todo nos facilita la automatización de tareas. Está especialmente orientado a tareas como minificación (minify), compilación, testing, etc. Esto al final del día se traduce en un gran ahorro de tiempo en todo el proceso que envuelve el desarrollo de aplicaciones web.
GruntJS está en constante desarrollo y una de las mejores cosas que tiene es que existen plugins para casi cualquier cosa que quieras hacer, puedes ver los plugins disponibles desde la página oficial de Grunt JS Plugins.
¿Cómo funciona Grunt JS?
GruntJS funciona llamando a un fichero JS que llamaremos «gruntfile», donde le indicaremos en formato JSON qué tareas queremos automatizar. Ahora bien, veamos algunos ejemplos sobre cómo poner en práctica la instalación y configuración de GruntJS.
Instalando Grunt JS
Para la instalación de este paquete lo hacemos via npm que es el administrador de programas de nodejs, recuerda que esta instalación se debe realizar como usuario administrador o root.
npm install -g grunt-cli
Configuración
Para la configuración de Grunt en nuestro proyecto, debemos crear un archivo llamado Gruntfile.js que sera un archivo con sintaxis valida de javascript.
Un archivo Gruntfile.js esta compuesto por las siguientes partes
– Función principal del Modulo de Node
– Configuración del proyecto y de las tareas a realizar
– Carga de los plugins de Grunts y de las tareas
– Tareas personalizadas
Ejemplos de uso
Concatenar nuestros archivos de JS en un archivo final
– Se requiere utilizar el plugin grunt-contrib-concat
package.json : Recuerden que estas librerias se ejecutan con npm install
{
"name": "demogrunt",
"version": "1.0",
"devDependencies": {
"connect-modrewrite": "^0.7.9",
"grunt": "^0.4.5",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "^0.8.0",
},
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: [
'public/js/lib/*.js',
],
dest: 'public/js/app.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
}
Ejecutar Gruntfile.js
Al ejecutar el comando grunt solamente se ejecutara la tarea por defecto ‘default’ que se encargara de concatenar todos los archivos que se encuentren en public/js/lib/*.js y la salida sera guardada en un solo archivo ubicado en public/js/app.js, tambien pueden llamar a la función concat directamente con el comando grunt concat
Conclusiones
Como pudimos ver, la instalación y configuración de GruntJS sobre Linux no es tarea difícil, y nos permite gracias a la automatización de tareas ahorrar valioso tiempo de desarrolllo, tiene una comunidad respaldándolo e infinidad de plugins. Además se está convirtiendo en una herramienta esencial a la hora de desarrollar aplicaciones web, tanto que es usado en pequeñas y grandes compañias como Twitter y Adobe.
¿Qué hay de ti? ¿Lo has usado? ¿Cuál es tu opinión sobre Grunt?
