YEOMAN – Yo, Grunt, Bower – Power tools for front-end developers

Yeoman is a tool for modern workflow to aid front-end web application development. Yeoman consists of three tools to manage this workflow and has generators available for Angular, Backbone and a collection of over 100+ other projects

+ Grunt – It is the builder and utility component that helps automate repitive tasks, script minification, javascript task compiler, compiling sass, coffee script
+ Yo – It is the code generator component that helps in scaffolding, writing boilerplate code, install some grunt tasks
+ Bower – It is the package manager for web and it helps fetch javascript library and/or javascript/css frameworks and its dependencies. This is similar to Maven for java.
We need to install node which comes with “npm” package manager and it works with yo.
We will need Ruby and Compass depending on project needs
> gem update –system
> gem install compass
> compass create SampleProject
Install yeoman by issuing the command below
> npm install yo -g
Yeoman uses generators to generate code for web application that takes care of SASS, modernizer build, twitter bootstrap install
> npm install generator-webapp -g
Run the web app by issuing the below command (using administrative privilege)
> yo wepapp
If you want to install a dependency module, use
> bower install angular-ui
To test the web application
> grunt test
Preview the web application that is created by issuing the command
> grunt serve
You can edit the files created under the “app” folder to work on the files that were created for you.
When you want to build for production, tyring to get lean as possible, image optimization, report about the build
> grunt build
The files that are created will be stored under “dist” folder.
Associated links:
If SASS related errors get reported, then try to uninstall SASS and reinstall it back.
> gem uninstall compass
> gem install compass

Written by kurinchilamp

Website: http://

Leave a Reply

Your email address will not be published. Required fields are marked *