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.