GruntJS es una herramienta para ejecutar tareas mediante Javascript. El uso de buenas prácticas hace que nos tengamos que centrar en un desarrollo de calidad, automatizando lo máximo posible las tareas y centrándonos en un buen código.
Podemos configurar Sass, Coffeescript, Less, ejecutar test con Jasmine, entre muchas más cosas. Veremos en este artículo cómo instalar GruntJS y una breve explicación de sus componentes.
¿Qué es GruntJS?
Se puede resumir como automatización, los desarrolladores tenemos que pensar que nuestra labor es desarrollar, y desarrollar bien. GruntJS ayuda a que nos centremos en desarrollar código de calidad, automatizando tareas tales como minificación de ficheros, compilar código Sass o Less, ejecutar test, entre otras cosas.
Personalmente lo uso y es una herramienta muy interesante, es un paso adelante en el desarrollo Frontend y una gran ayuda en la empresa donde trabajo.
Instalando GruntJS
GruntJS se instala vía Node Package Modules (npm), por lo que deben tener instalado NodeJS en su ordenador. Para instalar NodeJS visiten el siguiente enlace: Web de NodeJS
Luego de instalar NodeJS, deben ejecutar el siguiente comando en la consola. Recuerden que deben estar como Administradores si están en Windows, o sudo en otro caso:
npm install -g grunt-cliEsto habilitará el comando grunt en cualquiera de nuestros directorios.
Componentes principales
Una instalación típica de GruntJS tiene muchos ficheros, pero debemos centrarnos en 2: packaje.json y Gruntfile
- package.json: Nos permite guardar datos de nuestro proyecto para luego usarlos en el Gruntfile. Es típico guardar las Urls a nuestras carpetas contenedoras de ficheros Coffee o Sass/Less.
- Gruntfile: Puede tener extensión .js o .coffee. Es el fichero principal y en el que configuraremos nuestras tareas y abrir nuestros plugins.
Este es un ejemplo de package.json:
{
"cssFolder": "path/to/sass/files",
"jsFolder": {
"folder1": "folder1"
}
}Ejemplo básico de configuración de GruntFile
Para instalar la última versión de GruntJS en nuestra carpeta, debemos ir a ella y ejecutar el siguiente comando en nuestra consola:
npm install grunt --save-devEsto nos pondrá muchos ficheros en nuestro Gruntfile y package.json. El fichero json podemos vaciarlo por completo y completarlo con los valores que veamos necesarios para nuestro proyecto.
En nuestro GruntFile veremos mucho código, pero debemos quedarnos con lo siguiente:
module.exports = function(grunt) { // Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
La función grunt.initConfig contiene la configuración de Grunt, básicamente declararemos las tareas que queramos y sus parámetros correspondientes. Seguramente esta parte sea la más complicada de todas, ya que cada plugin de Grunt tiene su propia configuración, por lo que debemos estudiar bien cómo dejar 100% configurado nuestro flow. En el ejemplo se muestra la configuración del plugin de Uglify
La función grunt.loadNpmTasks abre la tarea que tengamos instalada en Grunt, para que la reconozca y pueda utilizarla. Si quisieramos, por ejemplo, usar Sass, además de configurar el initConfig, deberíamos instalar el plugin y hacer un load. Abajo está el ejemplo:
//Primero instalar
npm install grunt-contrib-sass//Load
grunt.loadNpmTasks('grunt-contrib-sass');
Por último, grunt.registerTask registra las tareas que queramos ejecutar con GruntJS. En el ejemplo por defecto siempre se ejecutará la tarea 'uglify' (grunt.registerTask('default', ['uglify'])). Esto quiere decir que si ejecutamos el comando grunt, por defecto se hará la tarea 'uglify', que minificará los ficheros según la configuración que hayamos hecho en el grunt.initConfig.
Otro ejemplo es el siguiente:
grunt.registerTask('sass', ['sass']);
grunt.registerTask('default', ['uglify']);Si ejecutamos en la consola "grunt sass", entonces ejecutaremos la tarea "sass", en cambio si solo ponemos "grunt", se ejecutará la tarea "uglify".
Conclusiones
Una breve introducción a GruntJS nos hace entender la potencia que tiene y la gran automatización que tenemos si lo sabemos configurar bien. En un próximo artículo veremos cómo hacer que GruntJS ejecute acciones automáticamente al guardar ficheros, usando el plugin Watch.