Crea una aplicación web con Yeoman

16 febrero, 2018

Si ya tienes un rato en el desarrollo web y aun creas cada proyecto desde cero, es decir haces cada paso de manera manual, desde crear las carpetas y archivos, descargar cada dependencia o librería a usar como jQuery, Modernizr, prefixfree, etc. presta atención que esto te podrá ayudar bastante, si eres nuevo en el desarrollo también te invito a conocer esta herramienta con la que automatizaras tu flujo de trabajo.

¿Qué es yeoman?

Tal y como lo describen en su web Yeoman te ayuda a iniciar tus proyectos de una manera fácil y rápida, escribiendo el código con buenas practicas.

Se basa en un sistema de generadores, el cual es un proyecto pre construido con una estructura básica de trabajo, estos generadores son modulares, esto nos da la ventaja de ir escalando nuestro proyecto conforme lo vallamos ocupando.

Las herramientas

Yeoman se basa en 3 herramientas para mejorar nuestra productividad:

Yo: El comando yo nos permite inicializar un proyecto desde la línea de comandos, configurar el proyecto, instalar las dependencias iniciales que ocuparemos para la compilación.

Gulp, Grunt: El sistema de compilación, se puede usar uno u otro.

Bower, npm: Administrador de paquetes que se utilizan para gestionar las dependencias del proyecto.

Instalación

Requisitos previos:

NodeJs y Npm

Teniendo los requisitos tecleamos desde la terminal:

npm install -g yo

Aquí se instala Yeoman (Yo) de manera global en nuestro sistema operativo.

Instalando el generador

En este post me enfocaré en el generador webapp procederemos a su instalación no sin antes mostrarle las bondades que nos ofrece:

Caracteristicas de este generador:

  • Características de ES2015 habilitadas por medio de Babel
  • Autoprefix CSS
  • Servidor local con BrowserSync
  • Compila Sass automáticamente con libsass
  • Optimización de imágenes
  • Instalación de dependencias con Bower
  • Tareas automatizadas por Gulp

 

Su instalación es muy sencilla y es también a través de la terminal:

npm install --global yo gulp-cli bower generator-webapp

Comenzando

Primero hay que crear una carpeta para nuestro proyecto y acceder a ella desde terminal:

Correr el comando yo webapp y configurar el proyecto desde el asistente.

Elegimos las opciones deseadas:

Al elegir BS nos preguntará que versión deseamos:

Elegir un entorno de prueba:

TDD (Test Driven Development)

BDD (Behauvior Driven Development)

Esperamos un rato para que npm y bower instalen las dependencias necesarias (dependerá de tu conexión)

 

Estructura de carpetas

Al terminar de generar nuestra webapp tenemos esta estructura:


Lista de tareas gulp

gulp serve #Levanta un servidor que vigila y actualiza el navegador con cada cambio
bower install --save <package> #Para instalar dependencias frontend
gulp serve:test #Servidor para pruebas que vigila y actualiza el navegador con cada cambio
gulpto build #Prepara tu webapp lista para producción
gulp serve:dist #Vista previa del servidor en producción

Concluyendo:

Pareciera que son muchas cosas las que hay que hacer y configurar, pero una vez que lo domines se convertirá en uno de tus aliados al momento de desarrollar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

© Copyright 2017 - 2018 | Héctor Peña - Derechos reservados.