gem install compass
Grunt – Grunt is a command-line tool that lets you run a heap of tasks in one command, all customized to your liking and tailored to your project’s needs. It helps to automate repetitive jobs like CSS preprocessing, or minifying code for a production environment.
Bower – Bower is used for dependency management. You no longer have to manually install all your dependency and update it all by yourself. You can update and manage your dependencies using bower. However, I will write more about bower in my next tutorial.
Yeoman – Its scaffolds out your app, pulls in relevant grunt tasks and bower dependencies which you will need for your app. Yeoman will create a basic folder structure for your app, create relevant grunt tasks and also will run bower for you which in return will download and install all the relevant dependencies for your app. Here I have only spoken about scaffolding an angular app. However yeoman can be used to develop apps with other frameworks also. Eg: You can scaffold your ember app with yeoman.
Utilizing these tools will make your life easier. Imagine an app which needs 40-50 libraries those need to be updated. Doing it manually will eat up a lot of your valuable time but with these three tools in use, you can save few extra time for your personal life.
- Open your terminal and , simply enter this to install yeoman
npm install –g yo
- Once yeoman is installed, we need to install angularJs scaffolding tool for yeoman
npm install -g generator-angular
Now you are ready to start scaffolding your app with yeoman, running task through grunt and managing your dependencies through bower.
Scaffolding Your App
- Create a folder in your PC, say ‘ang-test’ and then navigate to that folder in your terminal and run the following command.
- This command scaffolds your app in the current folder. After running this command yeoman will ask some questions to you, regarding how do you want to set up your application. Below are some sample questions.
[?] Would you like to use Sass (with Compass)? (Y/n)
Select ‘N’ if want to work with conventional and ‘Y’ if you want to work with SASS. I personally recommend SASS as it makes your CSS more maintainable and modular in nature. Also, it helps you to achieve DRY (Don’t Repeat Yourself) concept for writing your CSS. Make sure you have compass installed in your machine if you are opting to use SASS in your project.
[?] Would you like to include Bootstrap? (Y/n)
Bootstrap is a front end framework from twitter. If you opt to use it yeoman will automatically include the latest version of it in your project and create a demo page with the basic bootstrap styling.
[?] Would you like to use the Sass version of Bootstrap? (Y/n)
This option will come iff you have opted to use SASS instead of conventional CSS. Chose ‘Y’ to continue.
[?] Which modules would you like to include? (Press to select)
These are optional angularJS modules . You can learn more about them from here . I recommend including each of them but you can manage your libraries according to your app requirements.
After running these steps yeoman will start scaffolding your app.
Note: If you are working in a secure environment, there is a probability that your firewall configuration won’t allow bower to access git, which may through some error like the following.
ECMDERR Bower cant access git bower ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/angular/bower-angular-mocks.git", exit code of #128
In that case run the following command in your terminal and then start over from the step 1 again to scaffold you app.
git config --global url."https://".insteadOf git://
Once finished, your ang-test folder should look something like this.
- app (the guts of your AngularJS app)
- node_modules (contains node modules required for grunt, karma, etc.)
- test (used for testing your code)
- bower.json (where you define dependencies on other frameworks & libraries)
- Gruntfile.js (tells Grunt how to work with our project)
- karma.conf.js (used for testing)
- karma-e2e.conf.js (used for testing)
- package.json (used for node dependencies like grunt karma, etc.)
Understanding Folder Structure
To run your application now, open your terminal and navigate to the folder, where you scaffolded your app. Now type the following command in your terminal
This grunt task [serve] has been pulled in by yeoman to run a local server in your machine. This command starts a server on port 9000 that will serve the assets in your app folder. If you navigate to http://localhost:9000 you should see the HTML from app/views/main.html. Each time you make any changes in the HTML, CSS and JS files, it will automatically get reflected in your browser window. However, you can also create your own grunt task. To know more about it visit here
At this point, your boilerplate code is ready to use.
Example with Demo
I have created a demo repository for learning purpose only. You can clone download/clone it in your desktop and work with it. Please note that node_modules folder won’t be there in this folder. So, if you want to run all your grunt tasks and test cases then you have to follow the tutorial and create your own boilerplate code. The repository link is given below.
There are ‘n’ number of ways to reduce the redundancy and in this era of bullet trains no one wants to ride a bullock cart. Yeoman is just another tool to reduce unnecessary human efforts, so that you can put all your productivity in creating something new and exciting. Again, there is no harm in following the conventional development approach; except for the fact the fact time is a finite entity in this beautiful world! Happy coding!
Still having issues?
If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.