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 yourbower_componentsfolder 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-installerbyBret Littlehelps us bring in just the files that we need for our project.
Instead of pulling in the entire Bootstrap repo:
We can just pull in the necessary files:
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:
$ bowerinstallangular bootstrap jquery animate.css--save
This would create abower.jsonfile 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 thebower_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 wantjquery.jsandangular.js.
Using bower-installer
First, we need to install the bower-installer package:
$ npminstall-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 calledlibs/.
Add the followinginstallattribute to yourbower.jsonfile:
"install":{"path":"libs"}
This will place all the files we need in a newlibs/folder (not inside of your bower_components folder).
Now, we just need to activate bower-installer. From the command line, type:
$ bower-installer
Now, if we look at our folder structure, you’ll see there is alibs/folder with only the resources we need!
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 thespecific 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 officialGitHub repoprovides 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.