Bower Installer

Bower Installer

Click Here for TL;DR

Using Bower Installer in Your Build Process

I am currently working on an enterprise application that, it goes without saying, is very large. I rely heavily on bower to install my dependencies that I use throughout the application. I would say that we are about 5% done with the application and already our bower.json file has 20 dependencies (not to mention the dependencies those dependencies download…).

72,000 Files

After running a bower install my application topped out at an impressive 72,000 files. As you can imagine, this caused some problems. The problem I was running into was that I would download a dependency in order to use on one JS file in the /dist directory but was forced to download an entire git repo (for something like Material Design Icons this can be a very very large repo).

Enter Bower Installer

I began looking for solutions to my problem and stumbled upon Bower Installer. Bower Installer is a npm package which allows you to specify the specific files of a bower package that you are interested in and place those files in a directory of your choosing (bower_components by default). While at first glance this seemed like my miracle cure it turned out to fall a little short of that, but still has become a useful tool that I plan on continuing to use.

Install Bower Installer

To install Bower Installer I ran the following command:

1
npm install bower-installer --save-dev

Configure Bower Installer

Bower Installer uses your bower.json file to perform it’s logic, but some custom configuration is required. Lets take a look at a boilerplate example from Bower Installer’s website:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name" : "test",
  "version": "0.1",
  "dependencies" : {
    "jquery-ui" : "latest"
  },
  "install" : {
    "path" : "some/path",
    "sources" : {
      "jquery-ui" : [
        "components/jquery-ui/ui/jquery-ui.js",
        "components/jquery-ui/themes/start/jquery-ui.css"
      ]
    }
  }
}

You will notice the new property “install” that has been added to our otherwise standard bower.json file.

Bower Installer will look for this property to determine how it should run.

The first property inside “install” is “path”. The path property is where the files you specify to be plucked out will land in.

The second property is “sources”. The sources object holds keys that are used to reference your dependencies object to specify which dependencies the files found in the keys value (which is an array in this case) can be located in.

An Important Note

While doing a bower install on jquery-ui will cause the jquery-ui.js file to be located in the following file path: bower_components/jquery-ui/ui/jquery-ui.js Bower Installer will place it accordingly: some/path/jquery-ui/jquery-ui.js

It is important to realize this when references your dependencies in your index.html or wherever else you may be referencing them.

The Only Downside

While Bower Installer will pluck out these specific files and place them where you specify, it only has access to these files in the first place because it first ran a bower install. This means all those extra files are still located in your app in the bower_components folder or wherever you .bowerrc file specified.

My solution to this was to create a Gulp task to delete the bower_components folder after bower-installer ran. I use Gulp-RimRaf or Delete-Files-Folders.

Sample Configuration for Using Bower Installer and Gulp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//bower.json
{
  "name" : "test",
  "version": "0.1",
  "dependencies" : {
    "jquery-ui" : "latest"
  },
  "install" : {
    "path" : "some/path",
    "sources" : {
      "jquery-ui" : [
        "components/jquery-ui/ui/jquery-ui.js",
        "components/jquery-ui/themes/start/jquery-ui.css"
      ]
    }
  }
}

//gulpfile.js
var gulp    = require('gulp'),
    rimraf  = require('rimraf'),


gulp.task('deletebowercomponents', function(cb){
    return rimraf('./bower_components', cb);
});

gulp.task('default',function(){
    runSequence('deletebowercomponents');
});

I was able to get my application size from 72,000 files to 247 files using this technique. Unfortunately due to the required bower install that is run it did not increase the build speed at all, but when it is all said and done it is well worth it.

In The End

Bower Installer can be used to store only specific files of a bower package rather than the whole thing.

You can find configuration and usage examples on the npm website or in the post above.

A bower install is still run so you will need to delete your bower_components folder after the fact, this can be done with either a Gulp or Grunt task.

Pro Tip: Gulp Run Sequence

Use the gulp plugin runSequence to specify the order your gulp tasks will take place or two allow them to run in parallel. See the example below from their npm page.

1
2
3
gulp.task('build', function(cb) {
  runSequence('build-clean', ['build-scripts', 'build-styles'], 'build-html', cb);
});

In This example build-clean will run, then the tasks in the array will/can run in parallel, then build-html will run.

Leave a Reply

Your email address will not be published. Required fields are marked *