Erianna

Better Asset Management With Bower

July 27th, 2014 @ 21:20 Programming

One of the biggest problems with maintaining any web application is keeping on top of all the different assets that modern web applications depend on. As new versions of CSS and JavaScript libraries are released, making sure your application integrates bug fixes and updates can be almost impossible if you're just committing an library to your application. In this post I'm going to show a better way of managing your assets. It's called Bower. This article will show briefly how to use Bower and how to integrate it into our Grunt workflow.

What is Bower?

In it's most simplest form, Bower is an package manager for web assets - JavaScript libraries, CSS frameworks, and other third party utilities. Bower works in many ways like Node Package Manager - it has it's own bower.json file which it uses to keep track of packages your project is using and can be used to manage and install those packages without having to commit them to your project. Moreover, Bower makes sure that your application remains locked to a given version so that when your application is distributed you can ensure that the right packages are downloaded.

Why Should I Use Bower?

Bower has several benefits over traditional asset management techniques that make it ideal to use: - It allows assets to be linked rather than stored with a repository. - Reduces the overall size of your codebase - Allows for integration and automation with Grunt - And ensures that the right version of packages are installed when your application is distributed.

Let's take a look at how we can use Bower in our applications.

How to Use Bower?

Using Bower is pretty straight forward. After installing npm and git, Bower can be installed via the node cli:

npm install bower

If your project already has a package.json file you can add Bower to it by adding the --save switch. Or if you're so included you can install Bower globally using the -g switch which will make it available for all of your projects on that machine.

Once installed we can initialize bower in our repository by calling bower init, which will ask you a bunch of questions about your project then drop a file called bower.json in your folder. In its most basic form it looks as follows.

{ "name": "MyProject", "version": "0.0.1", "authors": [ "Charles R. Portwood II <charlesportwoodii@localhost>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ] }

Once setup we can add Bower dependencies to our project by calling bower install <package>. For instance if we wanted to install the latest version of jQuery we could call:

bower install jquery

If we want to permanently store this file in our bower.json file we can use the --save switch which will add a dependencies section to our file.

"dependencies": { "jquery": "~2.1.1" }

By default, Bower works with the latest semantic version from the project's Github repository (which is normally registered on http://bower.io. If a project isn't using semantic versioning however it may be necessary to specify the branch of the repository that you'll want to use.

"date.format": "git@github.com:jacwright/date.format.git#master",

And if a project neither uses semantic versioning or has a working branch, you can link directly to a file to include it

"highlight.min": "http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js",

As a package manager for the web, Bower is fairly robust and will allow you to take advantage of many different assets regardless of how they are stored. This in turn makes managing and storing our assets and versions incredibly easy.


Integrating Bower with Grunt

The real power over Bower though comes from it's integration with Grunt. Using Bower as our dependency manager, we can use Grunt to download all of our assets, and combine and compress them into usable distribution files that we can commit to our project. With this method we only have to commit a single file to our project, and anyone who downloads our project can build our project exactly as we did.

Let's take a look at an example. We'll start by installing grunt, bower, and grunt-bower-task that will allow us to run Bower from Grunt.

npm install grunt bower grunt-bower-task --save.

This will populate our package.json file as follows:

{ "name": "MyProject", "version": "0.0.1", "dependencies": { "bower": "^1.3.8", "grunt": "^0.4.5", "grunt-bower-task": "^0.4.0" } }

With our packages installed we can now start using grunt-bower-task inside of our Grunt file, and example of which is provided below:

``` module.exports = function(grunt) {

grunt.loadNpmTasks('grunt-bower-task');

// Register the tasks we want to run
grunt.registerTask('default', [
    'bower:install',
]);

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    paths: {
        assets: 'assets',
        bower: 'bower_components',
        lib: '<%= paths.assets %>/lib',
        dist: '<%= paths.assets %>/dist'
    },

    bower: {
      install: {
        options: {
          targetDir: "assets/lib"
        }
      }
    },
});

}; ```

From a freshly pulled repository, we can now simply run:

npm install && grunt

To install all the dependencies for our project. As an added convenience, the main file listed in each bower.json file will be dropped into assets/lib (the directory we defined in our Gruntfie.js).

From this point you can now utilize the tools previously covered in Using Grunt to Minify and Compress Assets article to combine and compress all of your CSS and JavaScript resources into a single distribution file which you can contribute to your project.


This brief tutorial is a pretty simple overview of how to use Bower and how to integrate it into our existing Grunt workflow. Be sure to checkout what else you can do with Bower by looking at http://bower.io, and if you have any questions feel free to leave a comment below - I'd love to hear from you!