DiseloDev

Aportes y consejos sobre tecnología

Grunt
Desarrollo 

Automatización de tareas con Grunt

esekorti ,

Grunt es una herramienta que nos ayuda con la gestión de las tareas mas o menos repetitivas que implica todo proyecto web. Concatenación y minificación de archivos css y js, compilación, ejecución de pruebas unitarias, despliegues, etc. En esta entrada vamos a dar una breve introducción a esta tecnología.

Instalación de Grunt

Grunt está desarrollado con NodeJS y por lo tanto se distribuye mediante su gestor de paquetes NMP. Por este motivo, el primer paso para disponer deGrunt en nuestro sistema será la instalación de NodeJS. El proceso para la instalación de NodeJS va a depender de nuestro sistema. Igual puede interesarte revisar nuestra entrada Instalación de NodeJS en Linux Mint Tina donde se describe el proceso de instalación en una distribución Linux Mint.

Una vez instalado NodeJS, instalaremos Grunt de forma global a través de NPM con el siguiente comando:

sudo npm install -g grunt-cli

Cabe destacar que grunt-cli no instala el ejecutor de tareas, básicamente su cometido es ejecutar la versión de Grunt instalada por cada gruntfile, permitiendo varias versiones de Grunt en una misma máquina.

El siguiente comando nos instalará localmente en nuestro proyecto la última versión de Grunt:

sudo npm install grunt --save-dev

Este comando tiene las siguiente repercusiones, en nuestro archivo package.json ha añadido la dependencia del paquete Grunt, genera también el archivo package-lock.json y además genera el repositorio local node_modules. A nuestro control de versiones debemos añadir los archivos package.json y package-lock.json pero no el directorio node_modules (el cual debería figurar en .gitignore) puesto que este directorio se genera de forma automática al lanzar npm install.

El archivo Gruntfile es un archivo js, el cual se compone de:

  • La función wrapper
  • Configuración de proyecto y tareas
  • Carga de plugins grunt y tareas
  • Tareas personalizadas

Creando una tarea simple de Grunt

Vamos a crear una tarea inicial para realizar el despliegue del proyecto a nuestro hosting mediante sftp. Para ello vamos a hacer uso del plugin grunt-sftp-deploy. No entraremos en los detalles de este plugin, para saber mas nos remitimos a su página oficial. Lo primero que debemos hacer es instalar el plugin con el siguiente comando:

sudo npm install grunt-sftp-deploy --save-dev

Una vez instalado es momento de editar nuestro archivo Gruntfile.js. Lo que haremos en este archivo será:

  1. Definir las configuraciones de nuestro proyecto
  2. Carga de plugins.
  3. Registro de tareas
  4. (Opcional) Definir la tarea como tarea por defecto para no tener que ejecutarla indicando su nombre.

El archivo queda de la siguiente manera:

module.exports = function (grunt) {

  // Project configuration.
  grunt.initConfig({

    'sftp-deploy': {
      build: {
        auth: {
          host: 'mihost.com',
          port: 22,
          authKey: 'key1'
        },
        cache: 'sftpCache.json',
        src: '.',
        dest: 'path/destino',
        exclusions: ['.gitignore'],
        serverSep: '/',
        localSep: '/',
        concurrency: 4,
        progress: true
      }
    }
  });

  // Load the plugin
  grunt.loadNpmTasks('grunt-sftp-deploy');

  grunt.registerTask('desplegar', ['sftp-deploy']);

  // Default task(s).
  grunt.registerTask('default', 'desplegar');
};

Al definir la tarea como default solo necesitamos ejecutar el comando grunt en el directorio del proyecto para lanzarla.

Tareas personalizadas

Con Grunt no solo podemos limitarnos a las funcionalidades que nos brindan sus plugins, sino que también permite definir nuestras propias tareas. Un ejemplo de tarea personalizada sería el siguiente:

grunt.registerTask('holamundo', function(){
  grunt.log.writeln('Hola mundo!');
});

Al ejecutar esta tarea estaremos saludando al mundo.

También existe la posibilidad de pasar argumentos a nuestras tareas. Por ejemplo:

grunt.registerTask('saludar', function(nombre){
  grunt.log.writeln('Hola '+nombre+'!');
});

Cuando ejecutemos grunt saludar:Pedro podremos saludar a Pedro. Nuestra tarea podría recibir tantos argumentos como quisiéramos, llamando a la tarea grunt saludar:arg1:arg2:…:argN

También existe la posibilidad de llamar a tareas dentro de otras tareas. Este sería un ejemplo:

grunt.registerTask('saludagente', function(){
  grunt.tasks('saludar:pedro');
});

Como se puede comprobar, el sistema es muy flexible, por lo que va a ser imposible abarcar su completa funcionalidad en esta entrada. Si quieres saber más revisa la documentación oficial:

https://gruntjs.com/configuring-tasks
https://gruntjs.com/sample-gruntfile
https://gruntjs.com/creating-tasks

Si te gustó, comparte!