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
- Discovery of packages
- Checking of package dependecies
- Compatibility of packages
- Ordering of packages
- Manually digging of files
- Manual reference of file path
Bower Demo
bower install -S jquery#1.11.1
bower install -S jquery-hammerjs
Pain points
- Discovery of packages
- Checking of package dependencies
- Compatibility of packages
- Ordering of packages
- Manually digging of files
- 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
- npm init
- bower init
- 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
- bower install -S jquery-hammerjs
- 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
- bower install -S bootstrap
- 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
- Discovery of packages
- Checking of package dependencies
- Compatibility of packages
- Ordering of packages
- Manually digging of files
- 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
Bower: Best served with a build Tool
By Colin Toh
