What is Yeoman, Bower, and Grunt
Yeoman (http://yeoman.io) is a scaffold manager/app generator. The whole goal of apps is consistency. Think of it as a template for your app with the index page created, script tags in place, css files loaded, an so on. The whole point is just to make your life easier. How often have you gone to a website, downloaded the *.zip file, created a directory, and then copied and pasted parts of the zip file into specific directories? And for a single app, you probably do this a half a dozen times (angular, angular-resouces, jquery, jquery-ui, twitter bootstrap, angular-ui, etc). Then you go to your index.html and go back and forth remembering to type the names correctly and put them in the right place. Yeoman does this for you, so ultimately you save time and headaches.
Bower (http://bower.io) is a package/resource manager. You want jQuery, you got jQuery. You want angular-mocks, you got angular-mocks. It seriously makes getting resources downloaded and put in the right directories super easy. The upside to this is that any updates (lets say jQuery 2.1 comes out) can be done by running an update on Bower. All the resources will be checked and the outdated ones will be updated to the latest version. No more remembering weekly to visit all the resource sites. Bower has around 2000 resources in their repository, so anything you can think of from HTML, to CSS, to Javascript, they got it.
Grunt (http://grunt.io) is the worker of the bunch. With Grunt you can set up a mock server to see your app in action. You can also run the Karma tests that you should be writing. And finally you can compile, minify/uglify, and prep your code for production. If you are writing tests, you now how hard it is to get the adapters to work in Windows the first time and then remembering the steps... this simplifies it completely.
Prerequisites
Node. That's it. Node is super easy to install, just visit http://nodejs.org and click the Install button. On Windows you will get the *.msi file and in a few seconds the installer will be done.
**NOTE**
It has been a while since I installed Node, but if I am correct, using the MSI installer will also configure your PATH and allow you to use node and npm in Command Prompt. For this tutorial you will need to use npm.
Installing the programs
First things first, install the three amigos, and then the generators Yeoman needs for the Angular scaffolding.
npm install -g yo bower grunt-cli npm install -g generator-angular generator-karmaThat is it!
Creating your first Angular app
Using Command Prompt (because that is what we are doing), navigate to a directory to create your app. Really anywhere is fine:
cd c:\ mkdir angular-apps cd angular-apps mkdir first-app cd first-app
Inside the first-app directory, we now run Yeoman (yo) and create our scaffolding:
yo angular
Wait for a minute and then you will be presented with the following options:
Would you like to include Twitter Bootstrap? (Y/n) y If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanill a CSS)? (Y/n) n Would you like to include angular-resource.js? (Y/n) y Would you like to include angular-cookies.js? (Y/n) y Would you like to include angular-sanitize.js? (Y/n) y
After which it will download and organize your app entirely.
Now on to bower. We need to actually install the components the make this app run and tests to work:
bower install angular bower install angular-resource bower install angular-cookies bower install angular-sanitize bower install angular-mocks
If you wanted jQuery or some other plugins, you can install those as well. All these components are installed in the app/components folder and are very easy to tag:
<script type='text/javascript' src='components/angular/angular.js'></script> <script type='text/javascript' src='components/angular-resource/angular-resource.js'></script> <script type='text/javascript' src='components/%BowerPackage%/%BowerPackage%.js'></script>
Well the good news is, we don't have to write those in our index.html file as Yeoman already did all that for us, along with the app.js and controller.js files. So that brings us to the final category, running and testing with Grunt. There are 3 commands (grunt server, grunt test, and grunt) that will be used most often, but they may or may not work by default. Because of Yeoman's scaffolding generation, the Gruntfile.js has Compass dependencies, which in turn has Ruby dependencies. This can be a headache if you aren't planning on using Compass.
**NOTE**
Compass is a styling/scripting language for generating CSS files. If you have heard about LESS or SASS, it is similar and much more user friendly. Compass, in fact, takes what you have coded and converts it to SASS, which in turn is converted to CSS.
If you don't have Ruby installed and you aren't planning on using Compass, then you will need to edit your Gruntfile.js. The easiest thing to do is search for "Compass" and delete those objects/values. There are 5 places where Compass objects appear. First in the grunt.initConfig.watch object, then in the main object of grunt.initConfig. Finally in the three grunt.registerTask functions, there are 3 instances of Compass that need to be removed. If you are coding Angular you should be able to figure out how to remove those objects from the file, so I am not going to post the entire Gruntfile here.
Finally, you can run grunt server and Chrome will pop open with your first app. You can close that and run grunt test and your initial Karma test will run (Chrome will open, run the tests and close. The output is in the Command Prompt). And then you can build your app using grunt when it comes time for production.
I hope this helps get things going for you. It took me a while to figure out what all this was about and how to get the 3 amigos to play nicely with each other on Windows. If you have any questions, feel free to let me know.
No comments:
Post a Comment