Hace tiempo que Yeoman es conocido en el mundo web moderno. Sin embargo me he encontrado en las últimas semanas con gente que desconocía su uso. Es por ello que me he decidido a escribir sobre Yeoman.

Qué es Yeoman

Es una herramienta que nos ayuda a crear el esqueleto de una aplicacion web, utilizando buenas prácticas y formas de trabajo para ser más productivos.

Está formado por 3 herramientas:

• «yo»: es un ecosistema de generadores que es quien nos permite crear la estructura de nuestro proyecto web
• «grunt/gulp»: es la herramienta de construcción del proyecto. Nos permitirá construir la aplicación, automatizar tareas como el testing, comprimir ficheros …
• bower:  es la herramienta que nos permite manejar las dependencias del frontend de la aplicaicon

Cada una de estas herramientas, se mantienen de forma separada pero trabajan juntas dentro de Yeoman.

Antes de empezar con Yeoman

Es necesario tener instalado grunt, bower y yo. Doy por supuesto que ya teneis instalado Nodejs

Instalamos entonces, las 3 herramientas necesarias desde terminal

npm install -g yo grunt-cli bower

Comprobamos que estamos listos para trabajar con yeoman.
Escribimos en la terminal la palabra «yo»

Veremos un menú similar al siguiente. En mi caso, yo tengo instalados ya 2 generadores  como vereis en el listado (Oraclejet y Polymer). En vuestro caso el listado estará vacio

Empezando con Yeoman

Lo primero que tendremos que hacer es instalar un generador («Install a generator»).

Existen mas de 3000 generadores diferentes, segun el proyecto que queramos (angular, ionic, cordova, react, java, springMVC …). Podeis buscar desde terminal o en su pagina web .

http://yeoman.io/generators/

No vamos a rizar el rizo en este post, y vamos a instalarlos un generador llamado webapp para crear una web normal y corriente.

Podeis utilizar el buscador de generadores

O podeis utilizar la linea de comandos

npm install -g generator-webapp

Durante la instalación nos preguntará que módulos queremos añadir a nuestro proyecto haciendolo totalmente escalable a nuestras necesidades.

Una vez termine la instalacion tendremos una aplicacion web con las siguientes caracteristicas

• Css Autoprefixing
• Javascript preparado para ES6 usando Babel
• Compilacion de Css usando Sass
• Optimizacion de imágenes
• Testing

Para lanzar la aplicación en modo normal

gulp serve:dist

Para lanzar la aplicacion en modo testing

gulp serve:test

Y este será el resultado desplegado en el puerto 9000

Si os ha gustado Yeoman, no dejeis de ver el resto de generadores como Angular, Ionic, o Cordova.

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect