Usando Yeoman para generar el esqueleto de tu web
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 .
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.
No comments yet.