Full Stack Developer | Agilizando tus proyectos

 

Full Stack Developer | Agilizando tus proyectos

Mejora el flujo de trabajo es una de las tareas mas complicadas de hacer, pero gracias a herramientas como Yeoman nos permitiran hacer mas agil y en automatico tareas para el desarrollo de nuestros proyectos.
Pero Hablemos un poco de Yeoman que es un conjunto de herramientas compuestas por Bower y Grunt que en minutos crean el esqueleto de tus proyectos web. La instalacion es muy sencilla pero como requisito necesitamos tener instalado Node.js entonces una vez que tengamos Node js tendremos que abrir la consola y escribir la siguiente instruccion.

npm install -g yo bower grunt-cli

De esta forma tendremos instalado Yeoman ademas de Yo, Bower y Grunt pero hablemos ahora de como usar esta herramienta comenzando por los Generadores

Generadores

Para comenzar a usar Yeoman y crear nuestro primer esqueleto, lo que tenemos que hacer es instalar uno de los generadores que se encuentran disponibles, buscar y elegir cual es que se adecue a nuestras necesidades de nuestro proyecto. Pero que es un generador no es mas que una rutina escrita para construir un esqueleto en particular.

Actualmente exiten unos 20 generadores oficiales mantenidos por el equipo de Yeoman, de los cuales el más utilizado suele ser el generador de aplicaciones basadas en Angular. Ademas existen actualmente más de 700 generadores mantenidos por la comunidad teniendo desde Wordpress, Jekyll, MEAN y mucho más.

Por lo que en este caso como ejemplo vamos a crear un proyecto Web sencillo por lo que instalaremos uno de los generadores para crear una aplicacion web haciendo uso de esta instruccion

npm install -g yo

npm install -g generator-webapp

Ahora que tenemos nuestro ambiente preparado ya podemos comenzar a armar nuestra aplicación.
Entonces procederemos a crear una carpeta llamada Desarrolladores FullStack y accederemos a ella enseguida colocaremos el comando "yo" o su equivalente "yo webapp" Podemos ver que ahora tenemos una nueva opción en nuestro helper de Yeoman.

Si seguimos con el proceso veremos algo como esto:

?] What would you like to do? Run the Webapp generator (0.4.9)

Make sure you're in the directory you want to scaffold into.
This generator can also be run with: yo webapp

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
[?] What more would you like? Bootstrap
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create bower.json
   create .jshintrc
   create .editorconfig
   create app/favicon.ico
   create app/404.html
   create app/robots.txt
   create app/.htaccess
   create app/styles/main.css
   create app/index.html
   create app/scripts/main.js


I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.


npm WARN package.json aplicacion-web@0.0.0 No description
npm WARN package.json aplicacion-web@0.0.0 No repository field.
npm WARN package.json aplicacion-web@0.0.0 No README data
npm http GET https://registry.npmjs.org/grunt-bower-install
npm http GET https://registry.npmjs.org/grunt-autoprefixer
npm http GET https://registry.npmjs.org/grunt-mocha
...
...

Ahora dentro de los archivos que fueron creados vamos a abrir package.json, Grunt.js y bower.json donde podemos ver todo lo instalado asi como las versiones ademas de las rutas de cada archivo.