Only Grab the Files You Need While Using Bower

Bower is an amazing tool to bring some sanity to the multitudes of frontend packages that can be used in your application.

We’ve written about using Bower before in our article, Manage Front End Resources with Bower, but it can be improved even further.

While you should keep your bower_components folder out of your git repository, many people don’t like having the entire repo for a resource in their project. For instance, pulling in Bootstrap pulls in a lot of files that you would not need.

Fortunately there’s a great package to solve this very problem.

Bower Installer

bower-installer by Bret Little helps us bring in just the files that we need for our project.

Instead of pulling in the entire Bootstrap repo:

bower-components-bootstrap

We can just pull in the necessary files:

bower-installer-bootstrap

Configuration

To get started using bower-installer is very simple. Let’s say you have a project where you’ve pulled in Angular, Bootstrap, jQuery, and animate.css. You would pull these packages in like so:


$ bower install angular bootstrap jquery animate.css --save

This would create a bower.json file that looks like so:


{
  "name": "bower",
  "dependencies": {
    "angular": "~1.3.15",
    "bootstrap": "~3.3.4",
    "jquery": "~2.1.3",
    "animate.css": "~3.2.5"
  }
}  

This would also install these packages (and their giant repos) into the bower_components/ folder. Let’s use bower-installer to quickly grab only the files that we need out of each of these packages.

For instance, we only want jquery.js and angular.js.

Using bower-installer

First, we need to install the bower-installer package:


$ npm install -g bower-installer

This will use Node and npm to install bower-installer globally.

After installing, the simplest way to use bower-installer is to specify the path you would like to use. For this example, we’re going to place the necessary files in a folder called libs/.

Add the following install attribute to your bower.json file:


  "install": {
    "path": "libs"
  }

This will place all the files we need in a new libs/ folder (not inside of your bower_components folder).

Now, we just need to activate bower-installer. From the command line, type:


$ bower-installer
bower-installer-install

Now, if we look at our folder structure, you’ll see there is a libs/ folder with only the resources we need!

bower-installer-folder-structure

bower-installer will try to grab the relevant files, but if it can’t because the main files aren’t defined, then you can override with the specific files you want.

Conclusion

bower-installer is a simple, but neat package that can help fix one of the main complaints of Bower.

There are many other ways to configure bower-installer than to just drop in the files in one main folder. The official GitHub repo provides great explanations of all the other ways that it can be configured.

Give it a look through and see if you can use it in your own projects.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.