Empezar a utilizar Grunt

Como programador front-end hay ciertas tareas que pueden repetirse a diario como:

  • Modularizar el CSS pero posteriormente concatenarlos en unos pocos archivos css en su versión de producción. Lo mismo para el JavaScript.
  • Comprimir el CSS y el JavaScript para conseguir un tamaño menor de los ficheros cuando se ponen en producción.
  • Realizar una optimización de todas las imágenes utilizadas.
  • Compilar el código de Less, Sass, SCSS, etc a código real CSS.

logo de gruntjs

La lista anterior, que desde luego no es una lista completa de las tareas de un front-end, pero son cosas que tenemos que hacer, podemos decir que es una lista de tareas.

Pues bien, Grunt, del que seguro que ya has oído hablar,  resulta que es un gestor de tareas. Grunt puede realizar tareas automáticas, como las indicadas anteriormente,  que apenas requieran de nuestro maravilloso talento. Simplemente tendremos que abrir la línea de comandos, ir hasta el directorio raíz de nuestro proyecto, escribir grunt y darle al return. Así de sencillo. Obviamente es necesario configurarlo antes, y ahí es donde nos podemos quedar atascados ya que en contra de la forma en que lo venden, no es algo tan trivial.

Y como creo que Grunt es más conocido de lo que luego en realidad se usa, he decidido escribir este post en donde todos podamos ver cómo configurarlo para un proyecto web.

Lo primero que debemos saber es que Grunt se ejecuta sobre Node, por lo que deberemos tener Node instalado. La instalación de Node a día de hoy es trivial (siguiente, siguiente, siguiente y  finalizar).

Instalar Grunt

Primero abrimos una ventana de comandos con permisos de administrador y vamos hasta el directorio raíz de nuestro proyecto. Escribimos el siguiente comando:

npm install -g grunt-cli

Con esto instalamos la interfaz de línea de comandos de Grunt de forma global.

grunt-packagejson

 

Después necesitaremos un fichero en la raíz de tu proyecto llamado package.json. Este fichero define cómo Node y NPM trata las dependencias. Una vez tenemos el package.json en su sitio e indicando que grunt es una dependencia, podemos teclear el siguiente comando:

npm install

Y veremos que se crea una nueva carpeta llamada node_modules, que es donde se nos han descargado todas las dependencias necesarias.

grunt-node_modules

Concatenar ficheros con Grunt

Ya tenemos Grunt instalado y vemos que en nuestro proyecto tenemos tres ficheros de javascript responsables de realizar 3 peticiones al servidor que podríamos reducirlos a un sólo fichero y por lo tanto a una sola llamada al servidor.

  • plugins.js
  • main.js
  • carrusel.js

En producción, concatenaremos estos tres ficheros en uno, produccion.js. Tenemos que indicarle a Grunt que lo haga. El plugin oficial de Grunt para concatener ficheros se llama grunt-contrib-concat. En su página podemos leer que para incluirlo como dependencia es necesario ejecutar el siguiente comando:

npm install grunt-contrib-concat --save-dev

Si ahora volvemos a nuestro package.json veremos que se ha añadido la línea:

“grunt-contrib-concat”: “^0.5.1”

Para usar este plugin necesitamos empezar a configurar Grunt para que realmente lo utilice tal y como nosotros queremos. Para ello vamos a crear al mismo nivel que package.json un fichero llamado Gruntfile.js (ojo con la G mayúscula)

module.exports = function ( grunt ) {
  // La configuración de Grunt va aquí
  
  grunt.initConfig({
    pkg: grunt.file.readJSON( 'package.json' ), //lectura del package.json
    
    concat: {
      //La configuración para concatenar los fichero va aquí
    }

  });

  // Le decimos a Grunt que queremos usar grunt-contrib-concat
  grunt.loadNpmTasks( 'grunt-contrib-concat' );

  // Donde le decimos a Grunt qué hacer cuando teclearmos "grunt" en la consola.
  grunt.registerTask('default', [ 'concat' ] );

};

Hay que seguir la sintaxis anterior en donde se puede ver por los comentarios, de qué va el asunto.

concat: {
      dist: {
        src : [ 'js/plugins.js', 'js/carrusel.js', 'js/main.js' ],
        dest: 'build/js/produccion.js'
      }
}

Aquí, en el fichero Gruntfile.js hemos incluido dentro de la tarea concat, la sintaxis necesaria para concatenar los tres ficheros js en uno solo llamado produccion.js que está en la subcarpeta js de la carpeta build. src es de source y dest de destination.

Para ejecutarlo tecleamos

grunt

Y si todo ha ido bien, ¡Mágia!. Grunt pasa a ejecutar nuestra tarea default que lanzará a su vez la tarea ‘concat‘. Vemos que aunque no existía la carpeta build, Grunt la ha generado.

grunt-concat

Dejaré para futuros post cómo hacer que Grunt haga otras tareas muy comunes por nosotros como minificar javascript, optimizar imágenes.

 

 

Empezar a utilizar Grunt