Bower: Best served with a Build Tool

What's Bower?

It's a Package Manager for the web.

Include jQuery and jquery.hammer.js in your website

1) Go to jQuery website

The traditional way:

2) Download jQuery version 1.11.1

3) Copy and paste the jQuery file into the working directory

 

4) Manually reference the jQuery file in the correct order inside the working file (i.e. index.html)

5) Next, to install jquery.hammer.js, repeat Step 1 - 4

6) You realise jquery-hammer depends on jQuery 2.0. Repeat Step 1 - 4 to install the correct jQuery version.

Pain points

  1. Discovery of packages
  2. Checking of package dependecies
  3. Compatibility of packages
  4. Ordering of packages
  5. Manually digging of files
  6. Manual reference of file path

Bower Demo 

bower install -S jquery#1.11.1

bower install -S jquery-hammerjs

Pain points

  1. Discovery of packages
  2. Checking of package dependencies
  3. Compatibility of packages
  4. Ordering of packages
  5. Manually digging of files
  6. Manual reference of file path

Grunt

Grunt can fix problem 4 - 6

All Bower-registered package must have a bower.json

Introduction of a bower.json file

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "version": "3.3.1",
  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js",
    "dist/fonts/glyphicons-halflings-regular.eot",
    "dist/fonts/glyphicons-halflings-regular.svg",
    "dist/fonts/glyphicons-halflings-regular.ttf",
    "dist/fonts/glyphicons-halflings-regular.woff"
  ],
  "dependencies": {
    "jquery": ">= 1.9.1"
  }
}

Bootstrap's bower.json

Focus on the "main" and "dependencies" option

grunt-wiredep

Bower + Grunt Demo

  1. npm init
  2. bower init
  3. npm install --save grunt-wiredep && npm install --save matchdep

Let's do the necessary setup first

module.exports = function(grunt){
 
    require("matchdep").filter("grunt-*").forEach(grunt.loadNpmTasks);
 
    grunt.initConfig({
        wiredep: {
            target: {
                src:'index.html'
            }
        }
    });
 
    grunt.registerTask('default',['wiredep']);
 
};

Setup Gruntfile.js

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Untitled</title>
 
        <!-- bower:css -->
        <!-- endbower -->
    </head>
    <body>
 
 
        <!-- bower:js -->
        <!-- endbower -->
    </body>
</html>

Insert placeholder into index.html

Ok that's the end of setup. Time to install packages

Install jQuery-hammer

  1. bower install -S jquery-hammerjs
  2. grunt
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Untitled</title>
 
        <!-- bower:css -->
        <!-- endbower -->
    </head>
    <body>
 
 
        <!-- bower:js -->
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/hammerjs/hammer.js"></script>
        <script src="bower_components/jquery-hammerjs/jquery.hammer.js"></script>
        <!-- endbower -->
    </body>
</html>

Install bootstrap

  1. bower install -S bootstrap
  2. grunt
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Untitled</title>
 
        <!-- bower:css -->
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <!-- endbower -->
    </head>
    <body>
 
 
        <!-- bower:js -->
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/hammerjs/hammer.js"></script>
        <script src="bower_components/jquery-hammerjs/jquery.hammer.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <!-- endbower -->
    </body>
</html>

Pain points

  1. Discovery of packages
  2. Checking of package dependencies
  3. Compatibility of packages
  4. Ordering of packages
  5. Manually digging of files
  6. Manual reference of file path

Pros

  • Scalable package installation
  • Don't need to think so much, just install and develop

Cons

  • Need some overhead in order to insert a few lines of javascript code

More info at

http://colintoh.com/blog/bower-best-served-with-build-tool