Manual de integración de Grunt con Drupal

“I will always choose a lazy person to do a difficult job… because, he will find an easy way to do it.” Bill Gates

Con esta mítica frase de nuestro amigo Bill quiero presentaros hoy al señor Grunt. Ahora os preguntaréis:

¿Qué es Grunt? (¿Quién es este tío que tiene nombre de orco?)

La respuesta es: Primero, no es un quién, sino un qué. ¿Un qué? Dirás ahora, a lo que yo te responderé: si me hubieses dejado continuar hubiese llegado a… segundo, es un “task runner”, automatiza las tareas que tú le digas como tú le digas. ¿Es, por tanto, un esclavo? ¡Pues justo eso! ¡pero quitándole las connotaciones morales negativas, ya que no sufre haciendo sus tareas!

Lo que nos lleva a una segunda pregunta: ¿Por qué usar Grunt?

Estoy convencido que nadie se ha hecho esta pregunta, ya que todos hemos querido tener un esclavo en algún momento de nuestras vidas… a mí no me engañáis, picaruelos. Pero bueno, os daré un motivo para los más escépticos, para lo que nos iremos a la primera frase de este escrito. Vamos a usar Grunt porque nos va a hacer todas aquellas tareas tediosas y repetitivas que a nadie nos gusta hacer.

¿Qué tareas puede automatizar Grunt?

La comunidad de Grunt es bastante multitudinaria. Vamos, que somos muchos los perezosos (y no me estoy refiriendo al monito ese que está en peligro de extinción… a ver si cuidamos un poquito más del medio ambiente ¡hombre!). Podemos encontrar una cantidad ingente de plugins desarrollados por esta comunidad, desde minificación, compilación, validación de sintaxis, pruebas unitarias, observar cambios de tus archivos, etc.

Podéis ir echándole un vistazo a los distintos plugins aquí

¿Cómo instalar Grunt?

Tranquilo, hombre, no seas impaciente. Si te viese Yoda seguro que te diría que la impaciencia lleva a algún lugar chungo. Para poner a trabajar a Grunt necesitas tener instaladas algunas cositas.

1. Node.js. Grunt es gestionado por npm, the Node.js package manager, y como desde la versión 0.6.3 de Node.js ya viene integrado nos basta con tener instalado a este. La instalación de node es muy sencilla, basta ir a su web y descargar la aplicación dependiendo de tu sistema operativo.

2. Instalar Grunt de forma global

npm install -g grunt-cli

Usando Grunt en un proyecto

Vale, ya tenemos nuestro entorno preparado, ahora toca configurar Grunt para nuestro proyecto.

Una configuración básica incluye dos archivos:

1. package.json: Donde mencionaremos grunt y los plugins que vas a incluir en tu proyecto.

2. Gruntfile.js: Usado para configurar y definir las tareas y cargar los plugins.

Si os parece, podemos empezar con un ejemplo básico y luego podemos ir ampliándolo de acuerdo a nuestras necesidades o los requerimientos del proyecto. Creamos el archivo package.json en la carpeta raíz del proyecto:

{
"name": "nombre-proyecto",
"version": "0.0.1"
}

Ahora, dentro del proyecto, ejecutamos:

npm install grunt –save-dev

Lo que nos incluirá las dependencias, en este caso tan sólo Grunt.

También se habrá creado una carpeta llamada “node_modules” donde estarán todos los plugins que vayamos instalando. Mencionaros que esta carpeta no es necesario exportarla con el resto del proyecto, ya que todo aquel que herede el proyecto deberá instalar grunt de forma local y generará esta carpeta (Recordad que somos perezosos y no queremos ir cargando con esta carpeta tan pesada de aquí para allá).

Ahora vamos a crear el otro archivo que hemos mencionado: “Gruntfile.js” También dentro de la carpeta raíz del proyecto. Es el encargado de cargar los plugins y de la configuración de los mismos. Para que tú y yo nos entendamos, es el que se encarga de darle las herramientas a nuestro esclavo y decirle cómo tiene que utilizarlas.

module.exports = function(grunt){

    grunt.initConfig({   
  
    });

};

Incluir tareas en Grunt (o cómo decirle a tu esclavo que haga algo)

¡Hodor, llévame más allá del muro… y de camino compila mis archivos sass! Lo siento, acabo de ver la sexta temporada de Juego de tronos y tanto hablar de esclavos me recuerda a nuestro amigo Hodor. Eso sí, os prometo no pedirle que sujete ninguna puerta (guiño, guiño).

Voy a poneros varios ejemplos con los que veréis que todos los plugins se instalan igual. La configuración de cada uno sí es específica y debéis consultarla en la api de cada plugin.

Vamos a empezar añadiendo una tarea para que compile sass. Para ello, vamos a incluir el plugin grunt-sass.  Tal y como dice la definición del plugin esta tarea utiliza libsass, que es un compilador sass en C++. Es mucho más rápido que el compilador original de Ruby y totalmente compatible.

1. Instalamos el plugin en  la carpeta raíz del proyecto:

npm install --save-dev grunt-sass

2. Cargar la tarea en Hodor, perdón, en Gruntifile.js

grunt.loadNpmTasks('grunt-sass');

3. Configurar la tarea

Éste es el paso específico de cada tarea y donde deberemos consultar la documentación del plugin.  Ésta es una configuración de ejemplo que comprime main.sass en main.css:

Sass: {
	options: {
		outputStyle: 'expanded',
		sourceMap: true
	},
	files: {
		'css/main.css': 'src/sass/main.sass',
		}
	}
},

npm install grunt-contrib-watch --save-dev

grunt.loadNpmTasks('grunt-contrib-watch');

watch: {
		scripts:{
			files:['**/*.sass'],
			asks:['sass'],
		},
	},

npm install grunt-browser-sync --save-dev

grunt.loadNpmTasks('grunt-browser-sync');

browserSync: {
    bsFiles: {
           src : [
                   'css/*.css',
                    'js/*.js',
                    'templates/**/*.html'
            ]
       },
       options: {
            watchTask: true,
            proxy: host,
            ui: false,
            injectChanges: false,
        }
   },

	grunt.registerTask('default', ["browserSync", "watch"]);