Working with Bower and Grunt

Even after getting everything up and running with Yeoman, Bower and Grunt, I realized there were still issues, especially when it came to utilizing Twitter Bootstrap in my project.  The problem arose from the Angular Generator, specifically in the fact that there were no images or javascript files included, only the stylesheet.

Solution #1

Yeoman has a separate generator (bootstrap-generator) that you can download:

npm install -g bootstrap-generator

After installation, you can then navigate to your app directory and run:

yo bootstrap:app

This will create a folder in your components directory with all your bootstrap needs.  You can then include the files as needed.

Problem #1

Bower also uses the components directory to add extra components.  Running the command:

bower list

or

bower update

causes errors to be thrown because that folder should only be used for Bower

Solution #2

Well, Yeoman works, but causes more errors than it is worth.  Bower was my next thought, and sure enough, you can get bootstrap installed with:

bower install bootstrap

Problem #2

Bower grabs the files from Twitter's GIT, and if you didn't already know, the files are all LESS, not CSS.  So if you are looking for vanilla CSS, this doesn't help.  Turns out however, that the files in the docs folder are the compiled version of Bootstrap, so that actually does work.  The only problem with that though is that Bower's simplistic nature (
<script src= 'components/COMPONENT_NAME/COMPONENT_NAME.js' > ) doesn't apply.

Final Solution

After doing some digging, Bower also has a package called Bootstrap.css, which is vanilla Bootstrap and Javascript files.  It is straightforward and contains all the images and everything needed to get you app up and running.

Final Problem

Trying to build with Grunt is a pain.  Grunt will only package up Javascript files located directly in the scripts folder, and image files located directly in the images folder.  Grunt will also find all your CSS files, and then package all those together in one single CSS file.  This is great, but can be a problem because your Bootstrap CSS points to ../img/glyphicons-halflings.png which wasn't moved to the image or img folder from the components folder.

Final Fix

The final solution is to edit your Gruntfile.js and add in a few things in your grunt.initConfig object.  All I did was changed the imagemin object to look like this:

    imagemin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/img',
          src: '{,*/}*.{png,jpg,jpeg}',
          dest: '<%= yeoman.dist %>/img'
        },{
          expand: true,
          cwd: '<%= yeoman.app %>/components/bootstrap/img',
          src: '{,*/}*.{png,jpg,jpeg}',
          dest: '<%= yeoman.dist %>/img'
        }]
      }
    },

This solved all my issues and even put the images into the img folder instead of images for a cleaner transition and less editing of Bootstrap.

Creating an Angular app with Yeoman, Bower, and Grunt on Windows

I will be brutally honest, as a Windows user I feel a little left out when it comes to terminal and the cool ability to install repositories by typing a few words.  I feel intimidated using SVN, GIT, Composer, PHP, Pecl, Pear, Phar, Node and any other program/script that seems to run with ease on Mac and Linux.  Over time things have become easier.  I have figured out the PATH file to let commands run a little easier in Windows Command Prompt.  I am not going to go over PATH and everything since I am assuming that is something you should probably already have figure out.  What I intend to go over is getting a basic Angular JS app up and running with tests and dependencies using Yeoman, Bower, and Grunt.

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-karma

 That 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.