Yeoman, Gruntjs y Brower excelentes herramientas para desarrollo front-end

Ayer estaba jugando con Yeoman y AngularJS. Ya que hasta ahora solo había visto unos vídeos y no había hecho nada concreto. Comencé a probarlo porque quiero hacer app mobil y de browser (una chromeapp), como en algún momento hice QioskoJS, aplicación que debería terminar vale acotar y re-hacerla con Angular seria excelente.  Cuando hice QioskoJS no conocía y no se si existía Yeoman y seguro no existía AngularJS en aquel entonces, por lo que hice un la aplicación con pseudo MVC que me invente utilizando HasherJS,  Signals y Crossroads.js para manejar las rutas con hash (#), para los “controlladores y modelos” un plain JS y para las vistas use embed JS porque se parecía a embed ruby (ERB) y ya estaba acostumbrado. Al final todo eso lo comprimía usando un compresor de Google que no es el Closure pero no recuerdo su nombre en aquel entonces. Debo que todo esto también fue por ganas de inventar y aprender.
Ahora después de mucho tiempo, primero mi código JS no es tan feo como lo era en aquel entonces, espero estar mejorando. Y gracias a @sadasant y tio Google Reader he conocido nuevas herramientas para hacer la vida un poco mas fácil  una de ellas es Yeoman y sus amigos Grunt y Brower. Mucha gente me pregunta, para que sirven todas esas herramientas y para resumirlo: Para hacer todo eso que hice a pie hace mas de un año.
Yeoman es un script/paquete/programa de node, que se instala desde npm que sirve primero para autogenerar proyectos en distintos framework y luego de eso generar partes del proyecto.
Ejemplo:
Quiero hacer comenzar un proyecto en Angular, sin tener que ir creando carpeta por carpeta, archivo por archivo la estructura del proyecto. Yeoman la genera y ademas instala las dependencias de paquetes necesarias utilizando Brower, que es un manejador de dependencias y paquetes. Pero ademas de crear la estructura del proyecto también permite crear mas componentes del mismo y con la estructura base del archivo, si necesito una vista nueva el la genera, un servicio nuevo el lo genera y así sucesivamente, esto facilita la estandarización del proyecto y minimiza el desorden y los errores humanos. Luego interviene nuestro amigo Grunt que se encarga de levantar un server para el proyecto, y este servidor funciona como el plugin de livereload de chrome, pero con esteroiedes, ya que hace livereload del browser cada vez que se guarde cualquier archivo del proyecto y se encarga de procesar en vivo cualquier archivo de pre-procesador CSS, CoffeScript, etc. Y por ultimo también puede hacer build del proyecto minificando los archivo y procesando los SASS/LESS/El que se para poder llevar el proyecto a producción.
Entre los generadores que presenta Yeoman, al sol de hoy según el npm (npm search yeoman-generator):

NAME                  DESCRIPTION
ft-wp                 Front-Trends Wordpress generator
generator-angular     Yeoman generator for AngularJS
generator-angular-silex Yeoman generator for Silex based upon AngularJS
generator-assemble    Yeoman generator for Assemble
generator-aura        Yeoman generator for Aura.js
generator-backbone    Yeoman generator for Backbone.js
generator-backbone-amd generator-backbone-amd ======================
generator-barista     Yeoman generator for Barista
generator-bbb         Yeoman generator for Backbone Boilerplate
generator-bbproject   Yeoman Generator for BB Project
generator-boilerplate Yeoman Generator for ...
generator-bookmarklet Yeoman Generator for bookmarklets
generator-bootstrap   Yeoman generator for Twitter Bootstrap
generator-buster      generator-buster ================
generator-cagspa      A generator for Single Page Applications
generator-charcoal    Alternative Yeoman generator for Ember
generator-chrome-extension Yeoman generator for Chrome Extensions
generator-chromeapp   Yeoman generator for Chrome App
generator-cityjs      Yeoman generator for CityJS
generator-closure     Generator for Closure Library
generator-cucumber    Yeoman generator for Cucumber.js
generator-dotfiles    Get started with your projects quickly using this generato
generator-ember       Yeoman generator for Ember
generator-express     A nodejs express generator for Yeoman
generator-flask       Yeoman generator for Flask project
generator-footguard   Yeoman generator for single page application
generator-foundation  Yeoman generator for Stylus themes, especially zurb founda
generator-frontend    Scaffolds out a boilerplate for front-end development.
generator-generator   Generator Generator for Yeoman
generator-genesis     Yeoman Generator for Genesis Skeleton
generator-gpmd        Modified Yeoman generator for scaffolding out a front-end
generator-h5bp        HTML5 Boilerplate generator
generator-heroku      A heroku setup generator for Yeoman
generator-init        A generator for generating generators in Yeoman
generator-inuit       inuit.css generator
generator-jasmine     Yeoman generator for Jasmine
generator-karma       Yeoman generator for Karma
generator-kissy-gallery kissy gallery generator
generator-kissy-pie   kissy generator for kissypie
generator-lessapp     Edited default Yeoman generator for scaffolding out a fron
generator-maria       A generator for Yeoman
generator-microlib    A Yeoman generator for browser microlibs
generator-mobile-boilerplate H5BP Mobile Boilerplate generator
generator-mocha       Yeoman generator for Mocha
generator-nodestrap   Yeoman generator for a Heroku-ready, coffee-fueled web sta
generator-ozjs        Scaffolding tool for OzJS which offers a packaging workflo
generator-sails       A Yeoman sails generator largley copied from generator-web
generator-server-configs Scaffolds out webserver configuration for various platf
generator-sharepoint  Yeoman generator for scaffolding out SharePoint grunt buil
generator-silex       Yeoman generator for scaffolding out a silex app
generator-sp2010      Yeoman generator for projects using the SharePoint 2010 RE
generator-testacular  Yeoman generator for Testacular
generator-travis-ci   Yeoman generator that sets up travis-ci to do automated de
generator-ultimate    ULTIMATE Yeoman generator for ultimate-seed - the ultimate
generator-webapp      Default Yeoman generator for scaffolding out a front-end w
generator-wordpress   A Yeoman generator for WordPress
generator-yo-wordpress Yeoman generator for Wordpress project
imatic-stack          Imatic devel stack for single-page applications

Hasta ahora yo he estado jugando con el webapp sin nada, como para hacer pruebas de front-end a pie y el AngularJS y en verdad es una maravilla.
Por ahora no tengo mas que decir sobre esto, pero espero que les sirva para conocer y entender un poco mas sobre Yeoman, GruntJS y Brower.

¡Que la fuerza los acompañe!
@highercomve