Manual de integración de Grunt con Drupal

27/07/2016
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.

  1. 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.

libsass integración grunt con drupal

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',
		}
	}
},

Por ampliar la información, os voy a dar un par de ejemplo más. Vamos a automatizar aún más la tarea de compilación. ¿Os parece poner a un jubilado mirando como trabaja nuestro esclavo y le dé un latigazo cuando vea un cambio? ¡Para eso tenemos nuestro plugin grunt-contrib-watch! Este plugin tendrá unas tareas predefinidas cada vez que un fichero especificado sea visto, modificado o eliminado. Ahora repetimos los pasos:

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

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

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

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

3. Configurar la tarea (previa consulta de la documentación del plugin)

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

Como última tarea ¿qué os parece que nuestro navegador esté sincronizado con nuestra versión del proyecto y se actualice cada vez que hacemos un cambio? Lo sé, es genial y estáis hartos de tener que actualizar el navegador cada vez que hacéis un cambio. He aquí  Browser-Sync. Vamos, entonces, a nuestros tres pasos:

1. Instalamos el plugin:

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

2. Cargar la tarea en Gruntifile.js

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

3. Configurar la tarea (previa consulta de la documentación del plugin)

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

Por último, y para terminar, vamos a registrar las tareas que nuestro señor Grunt debe hacer por defecto:

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

Con lo cual le estamos diciendo que cada vez que lo llamemos (ejecutemos grunt en la consola desde la raiz del proyecto) se pondrá a hacer las tareas browserSync y watch.

Con esto creo que terminamos nuestra presentación de Grunt, al que empezamos llamando orco, luego esclavo, pasamos por Hodor y al que ahora, espero, lo tratemos de usted y con el máximo de los respetos ya que puede hacernos la vida mucho más fácil y cómoda.

Y para que tengáis un ejemplo con el que podáis trabajar, os dejo un enlace al theme para Drupal “Da Vinci”. Aquí podéis encontrar todo un señor Grunt, curtido en mil batallas y que, os aseguro (porque trabajo con él todos los días), os va a hacer la vida muuuuucho más fácil.

Comentarios

#129

Me ha encantado este post-

Me ha encantado este post-

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.