How to prevent Bower from bloating my app?

Question

I'm working on a little web application using Express.js, Backbone.js, Bootstrap and some others. I've decided to give Bower a try to manage the front end components for this one, but after installing the packages, I noticed that all of them installed tons of stuff that I don't need at all, like LESS files (Bootstrap) or QUnit tests for the framework (Backbone), README.md files, documentation source code, and so on:

As you can see, it's absolute madness in here.

I've searched the package index a bit and I've found a leaner version of Bootstrap called bootstrap.css, but after installing I noticed it is still version 2.3.2, so pretty much outdated.

Isn't there a way to install up to date dist versions of all those libraries?

The idea of having a package manager is nice but it seems a bit off putting to have my application source bloated with all this stuff. I most definitely do not need the Backbone documentation installed on my web server.

Answer 1

This is a matter of package authors not configuring their bower.json to ignore those extraneous files and folders. Additionally, not all package authors configure their bower.json to list the main file(s) for their package.

You can see how without having those two pieces of information-- what files aren't needed, and which ones are the "main" files-- Bower, or any other tool, can't reliably guess what is necessary and what is junk.

As far as it bloating your server; ideally, you shouldn't be committing Bower components. You would have a build process that takes your source files, wherever they may be on disk, and morphs them into one minified file.

Answer 2

You can try bowercopy. What does it do?

1. Download all the bower components listed in bower.json
2. Copy files you need to specified folder
3. (Optional) Remove the bower_components folder.

Every time you run the bowercopy task, it will do the process above.

A grunt config example

    bowercopy: {
        options: {
            destPrefix:'app/jslib',  // Here is the dest folder 
            clean:true // It's optinal
        },
        dist: {
           // List all the files you need here
           src:'backbone/backbone.js' // "src" can be an array
        }
    }

Yeah, You have to specify all the files you need one by one. But it does achieve your goal.