Feb 15, 2014

El workflow perfecto: Yeoman + Bower + Grunt

Últimamente estoy trasteando con los generadores de Yeoman. Yeoman es una herramienta para automatizar tareas en proyectos front-end. Trabaja conjuntamente con Bower y Grunt, otro par de proyectos open source para (adivina…) automatizar tareas.


Bower

Bower es una herramienta open source liberada por Twitter y sirve para gestionar todas las dependencias de tu proyecto front-end. La idea es similar a Composer en PHP o Bundler para Ruby.

El funcionamiento de Bower es bastante simple: creas la configuración en un archivo bower.json y después basta con lanzar una línea en la terminal ($ bower install) para tener todas las dependencias en local. Da igual si son 5 o 50, Bower las bajara por ti en pis pas.


Grunt

Grunt creado y mantenido por la gente de Bocoup, es una herramienta para automatizar tareas en tu entorno de desarrollo.

Por ejemplo concatenar .js o .css, minimizar HTML e incluso imágenes, compilar archivos .less o .sass, crear sprites sobre la marcha, etc. En fin, Grunt tiene un gran repositorio de plugins para cualquier tarea que te puedas imaginar.

Para configurar Grunt son necesarios dos archivos: package.json y Gruntfile.js. En el primero debes listar todas las dependencias necesarias para correr las tareas. En el segundo creas la configuración de cada tarea o grupo de tareas. Si sientes curiosidad, te recomiendo leer este artículo: Grunt for People Who Think Things Like Grunt are Weird and Hard


Resumen

Un generador Yeoman instala dependencias, crea carpetas, configura entornos (uno para producción y otro para desarrollo), arranca un servidor local, realiza tests, etc. Cualquier tarea por compleja que sea, basta con configurarlo correctamente para que Yeoman sea capaz de hacerlo el solo (siempre con la ayuda de Bower y Grunt).

La verdad es que existen cientos de generadores super útiles, para prácticamente cualquier tipo de proyecto. Y si no encuentras alguno que se adapte a tu requerimientos, siempre puedes crear un generador personalizado.

Lo que más me gusta es que se aprende mucho leyendo el código de cada generador. La gente intenta volcar todo su conocimiento técnico y forma de trabajar en cada generador. Y eso es oro puro.


Manos a la obra

Si os apetece trastear un poco, os dejo un par de ejemplos.

Importante: previamente debéis tener instalados Node, Git, Yeoman, Bower y Grunt en vuestras máquinas.


Crear un proyecto Bootstrap

Vamos a utilizar el generador creado por Thomas Lebeau

Este generador creará un proyecto con las siguientes dependencias: Bootstrap 3, ModernizrjQuery y Font Awesone (opcional).

La configuración de Bower la podéis encontrar en _bower.json. Las tareas de Grunt están listadas en _package.json. Estos ficheros forman parte del template que necesita Yeoman para hacer su magia.

La configuración de Yeoman la podéis encontrar en el fichero /app/index.js del generador.

Con la ayuda de npm, instalamos el generador del proyecto en global.

$ sudo npm install -g generator-bootstrap-less

Si queréis ver los generadores instalados:

$ yo —help

Creamos un directorio

$ mkdir ~/learning-bootstrap && cd $_

Le decimos a Yeoman que cree el scaffolding del proyecto

$ yo bootstrap-less

Instalamos las dependencias del proyecto

Esto creará y descargará dichas dependencias en la ruta app/bower_components del proyecto

$ bower install

Construimos el proyecto

El siguiente comando lanzará el grupo de tareas default descrita en la línea 289 del fichero Gruntfile.js. En este caso: jshint, test y build.

Las dependencias necesarias para ejecutar las tareas se encuentran en la carpeta node_modules en la raíz del proyecto.

Para ir más ligeros, vamos a saltarnos las comprobaciones de JSHint

$ grunt —force

Arrancamos el servidor

$ grunt serve

Si todo es correcto veréis en vuestra terminal la siguiente información:

Running “serve” task

Running “clean:server” (clean) task

Running “coffee:dist” (coffee) task

File app/scripts/hello.js created.

Running “less:dist” (less) task

File app/styles/main.css.map created.

File app/styles/main.css created.

Running “copy:server” (copy) task

Running “connect:livereload” (connect) task

Started connect web server on 127.0.0.1:9000.

Running “watch” task Waiting…

Estas son todas las tareas y grupos de tareas que ha lanzado $ grunt serve. Si queréis ver la configuración de esta tarea, abrid el archivo Gruntfile.js y buscad la línea 260.

Creamos el proyecto listo para subir a PRO

Probad a lanzar la siguiente línea:

$ grunt serve:dist

Como veréis las tareas ejecutadas son completamente distintas. Esto es posible gracias a que con Grunt podemos encadenar tareas con diferentes propósitos.

Una vez finalizada la tarea $ server:dist podéis ver que se ha creado una carpeta llamada dist. Allí es donde podéis encontrar vuestro proyecto listo para subir a PRO. ¿Fascinante eh? :)

Con el siguiente comando podréis ver las tareas disponibles:

$ grunt —help


Crear un proyecto Foundation

Vamos a utilizar el generador creado por Peter Foerger.

Este generador funciona básicamente como el anterior, con la única diferencia que el layout se gestiona con Foundation 5.

La configuración de Bower la podéis encontrar en _bower.json. Las tareas de Grunt están listadas en _package.json. Estos ficheros forman parte del template que necesita Yeoman para hacer su magia.

La configuración de Yeoman la podéis encontrar en el fichero /app/index.js del generador.

Con la ayuda de npm, instalamos el generador en global

$ sudo npm install -g generator-foundation-five

Creamos un directorio

$ mkdir ~/learning-foundation && cd $_

Le decimos a Yeoman que cree el scaffolding del proyecto

$ yo foundation-five

Instalamos las dependencias del proyecto

$ bower install

Instalamos las dependencias de Grunt. Esto no debería ser necesario pero el generador tiene un bug.

$ npm install

Construimos el proyecto

$ grunt

Arrancamos el servidor

$ grunt serve