Bower (Front End Package Manager)

What is Bower?

Front-end package manager

Normally used in modern open source and closed source projects

What Bower can do?

Managing components which contains HTML, CSS, JavaScript, fonts, etc.

Install right versions of packages and necessary dependencies of it.

Requirement

Bower depends on Node.js and npm.
Git is needed.
Some bower packages require git to be fetched and installed.

Advantages

No need to download the dependencies manually.
Can define a range of acceptable versions for a dependency.
Easy to update to newer versions within defined range.
No need to commit dependencies to version control.
Can distribute json file to install the package.

Installing bower

Bower is a node module, and can be installed with the following command:

npm install –g bower

This will install bower globally on your system.

Can check the version of bower with following command:

bower -version

Initial bower

Packages are defined by a manifest file bower.json.

Can create a bower.json with the following command:

bower init

You can set the setting specification during bower initializing.

Usage

Installing packages and dependencies

Install dependencies listed in bower.json

bower install

Install a package and add it to bower.json.

bower install <package> --save

Install specific version of a package and add it to bower.json.

bower install <package>#<version> --save

Update packages

To update all existing packages.

bower update

Use packages

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css">

All of the installed packages will be existed under the “bower_components” folder.

Search packages

To search available packages.

bower search <package>

Uninstall packages

To uninstall a locally installed package

bower uninstall <package-name>

Bower can be configured using json in a “.bowerrc” file.

{

“directory” : “js/libs”

}

It will downloaded the packages into js/libs folder.