Flujos de Trabajo modernos con Yeoman


qué es yeoman?


Yeoman es un conjunto de herramientas construidas sobre Node.js cuyo fin es el de implementar buenas prácticas de desarrollo web y simplificar las tareas repetitivas que están involucradas en la realización de cualquier proyecto.

Instalando Yeoman


Para instalar Yeoman debemos tener instalado Node.js y NPM ... luego solo ejecutamos:


npm install -g yo


Esto instalará todo lo necesario para ejecutar Yeoman

 

Herramientas que componen yeoman


Generadores de yeoman


Son herramientas que básicamente ayudan a crear el esqueleto del proyecto deseado, existen de muchos tipos para diversos lenguajes (no solamente JavaScript)


Generadores oficiales


webapp generator jquery bootstrap
gulp-webapp node angular backbone
mobile polymer ember karma
gruntplugin gruntfile mocha chromeapp
chrome-extension jasmine dummy commonjs


Generadores por la comunidad



    npm install -g generator-XXXXXXXXX

Yeoman provee oficial mente el generator-generator, que permite a cualquier usuario crear sus propios generadores, esto ha dado pie a que exista una variedad considerable de generadores que pueden ser encontrados aquí:

http://yeoman.io/community-generators.html

Qué contiene un generador?


Un generador además de estar compuesto por las plantillas de ejemplo del tipo de proyecto seleccionado, contiene también las dependencias del mismo (librerías, recursos gráficos ....) y adicionalmente las tareas propias del tipo de proyecto que deseo crear (server, test, build, minify....)

Instalando generadores para yeoman


Luego de instalar Yeoman, dispongo del comando "yo" que es interactivo, la acción que busco es "install a generator":


También es posible instalar un generador con npm:
npm install -g generator-webapp

Creando el esqueleto usando el generador


El primer paso es crear un directorio donde se vaya a crear el esqueleto, luego ubicarse en dicho directorio y ejecutar:

yo nombre_de_generador

también es posible usar el comando de forma interactiva, simplemente ejecutando "yo" y siguiendo las instrucciones.

Manejador de paquetes bower


Bower es el encargado de realizar todas las operaciones sobre las dependencias de nuestro proyecto


Operaciones de bower

Buscar dependencias:

bower search dependencia

Instalar dependencias:
bower install dependencia

Actualizar dependencias:
bower update dependencia

Desinstalar dependencias:
bower uninstall dependencia

Paquetes disponibles para bower


Existe una gran cantidad de paquetes, herramientas, librerías, recursos ... disponibles para instalar con bower.


Puedes dar un vistazo aquí:

http://bower.io/search/


Automatizador de tareas Grunt


Grunt es una herramienta que automatiza las tareas complicadas, tediosas, repetitivas pero necesarias a la hora de desarrollar un proyecto



Qué tipo de tareas puedo automatizar?


Cada generador trae por defecto las tareas automatizadas más comunes para su tipo de proyecto, las mas comunes incluyen: concatenar archivos, minificar archivos, ofuscar código, procesar hojas de estilo, correr tests, verificar código, empaquetar ....

Ejecutar tareas de Grunt


Para verificar las tareas disponibles de Grunt, en los archivos creados por el generador podremos encontrar el archivo Gruntfile.js , el cual podremos alterar de acuerdo a nuestras necesidades... este archivo tiene definidas todas las tareas disponibles para dicho generador.

Para ejecutar una tarea corremos:

grunt tarea


Creando mi generador personalizado


Yeoman proveé el generador "generator", el cual crea una estructura básica de un generador con algunos archivos de ejemplo... a partir de esta estructura yo puedo escribir mi generador personalizado que cuente con la estructura de archivos requerida, las dependencias deseadas y las tareas necesarias para automatizar algún tipo de proyecto. solo necesitamos ejecutar:

yo generator

Personalizando un generador existente


Existen muchas posibilidades de que el tipo de proyecto que deseemos automatizar ya exista pero simplemente no se acople a mi flujo de trabajo personal, para ello podemos clonar el generador ya existente y modificar la estructura de archivos, las dependencias y las tareas deseadas y registrarlo en nuestro sistema o publicarlo.

Algunos enlaces



Gracias a todos

 
Adrián Estrada
@edsadr

"Everything looks a way better in a hat"

2

Yeoman - Flujos de trabajo modernos

By Adrián Estrada

Yeoman - Flujos de trabajo modernos

  • 3,538