Using Bower to Only Install Specific Files Instead of Entire Directories

Using Bower to Only Install Specific Files Instead of Entire Directories

If you have any experience using Bower to install packages such as Bootstrap or jQuery, you most likely have to run into the issue of installing a bunch of junk that you don’t need.

When I want to use Bootstrap on my site, I only want bootstrap.min.css and bootstrap.min.js but I get the entire GitHub repository instead. That is my biggest gripe with Bower, and really only gripe.

Last night I stayed awake until 3am working with Grunt and Bower, trying to get Bower to only install the specific files that I wanted and not the entire repo. Finally, after quite some time, I figured it out. Let’s get started…

First, you must have Bower installed. if you don’t, then type into the terminal to install globally:

npm install -g bower

Then, you need to install Bower-Installer globally from the terminal.

NOTE: You must have Node.js installed. If you don’t, and you are on a Mac, and you have Homebrew installed, run brew install node. If you are Windows, go to the Node.js site and install it from there.

If you don’t have Homebrew yet, run:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once you have node installed, run:

npm install -g bower-installer

Then navigate to your project directory (the root of the directory), and in the terminal, type:

bower init

Bower will ask you a bunch of options. Most of the stuff you don’t really need to answer. The name you must and it must be unique. For version just write 0.0.1 or something. If you need help with any other options, the Bower website explains each option in detail.

Now you will have a file called bower.json in the root directory of your project. We need to add a couple things in this file. Open the file in Sublime or whatever text editor you use and let’s go to work.

The example I am going to show you is for adding Bootstrap, jQuery, and Velocity.js since I am doing front-end work here. I will show you an example of my entire bower file and tell you what exactly I added to make this work.

{
  "name": "gruntbower",
  "version": "0.0.1",
  "dependencies": {
      "bootstrap": "latest",
      "jquery": "latest",
      "velocity": "latest"
  },
  "install": {
    "path": "vendor",
    "sources": {
      "bootstrap": [
        "bower_components/bootstrap/dist/css/bootstrap.min.css",
        "bower_components/bootstrap/dist/js/bootstrap.min.js",
        "bower_components/bootstrap/dist/fonts/*"
      ],
      "jquery": [
        "bower_components/jquery/dist/jquery.min.js"
      ],
      "velocity": [
        "bower_components/velocity/velocity.min.js",
        "bower_components/velocity/velocity.ui.min.js"
      ]
    }
  },
  "authors": [
    "nate"
  ],
  "moduleType": [
    "node"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor",
    "test",
    "tests"
  ]
}

NOTE: You can find the file paths to the file you want on that specific project’s GitHub repo.

Here, I have added dependencies for bootstrap, jquery and velocity and stated that I want the latest version of each.

Next, I add an "install" object with "path" and "sources" properties. The path I put vendors, which is a folder I created within my project where I like to keep files from outside sources. I come from Ruby on Rails and I am used to a vendor folder. You can name the folder whatever you like.

If you want to go deeper, you can create a css and js folder inside vendors or whatever you named it and tell Bower to put all CSS and SCSS/LESS files in the css folder and all JS files in the js folder. It is really up to you.

"install" : {
    "path" : {
      "css": "vendor/css",
      "js": "vendor/js",
      "/[sc|le]ss$/": "vendor/css"
    },

The final step is to go back to the terminal and write:

bower-installer

That’s it! You now have the correct files in exactly the place you want them, without all that other crap that Bower typically installs.