What is Bower

What is

Bower - A package manager for the web.

Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

Bower is optimized for the front-end. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.

How to install

Bower is a command line utility. Install it with npm.

sudo npm install -g bower

Bower requires node, npm and git.

How to search a package

Bower official website provides a page to search for various software packages, the URL is https://bower.io/search/, as shown in the figure below, here you can search for various software packages.

Bower command line

Search angular

harbin@shangluo:~/Public/project/lanzhou/angular-start$ bower search angular
Search results:

    angular https://github.com/angular/bower-angular.git
    angular_js https://github.com/angular/angular.git
    angular-es6 https://github.com/angular/angular.git
    bower-angular https://github.com/angular/bower-angular.git
    angular-test https://github.com/angular/bower-angular.git
    angular-seed https://github.com/angular/angular-seed.git
    angular-latest https://github.com/angular/angular.js.git
    angular-hint https://github.com/angular/angular-hint.git
    angular-cli https://github.com/angular/angular-cli.git
    angular-archive https://github.com/angular/bower-angular.git
    bower-angular-master https://github.com/angular/bower-angular.git
    AAA https://github.com/angular/angular.git
    nucleus-angular https://github.com/nucleus-angular/nucleus-angular.git
    forms-angular https://github.com/forms-angular/forms-angular.git
    angular-ui https://github.com/angular-ui/angular-ui.git
    angular-touch https://github.com/angular/bower-angular-touch.git
    angular-scenario https://github.com/angular/bower-angular-scenario.git
    angular-sanitize https://github.com/angular/bower-angular-sanitize.git
    angular-route https://github.com/angular/bower-angular-route.git
    angular-resource https://github.com/angular/bower-angular-resource.git
    angular-mocks https://github.com/angular/bower-angular-mocks.git
    angular-midway https://github.com/angular-midway/angular-midway.git
    angular-messages https://github.com/angular/bower-angular-messages.git
    angular-loader https://github.com/angular/bower-angular-loader.git
    angular-linq https://github.com/Angular-Public/angular-linq.git
    angular-i18n https://github.com/angular/bower-angular-i18n.git
    angular-gantt https://github.com/angular-gantt/angular-gantt.git
    angular-canvas https://github.com/angular-canvas/angular-canvas.git
    angular-aria https://github.com/angular/bower-angular-aria.git
    angular-animate https://github.com/angular/bower-angular-animate.git
harbin@shangluo:~/Public/project/lanzhou/angular-start$ 

Install angular

harbin@shangluo:~/Public/project/lanzhou/angular-start$ bower help install

Usage:

    bower install [<options>]
    bower install <endpoint> [<endpoint> ..] [<options>]

Options:

    -F, --force-latest      Force latest version on conflict
    -f, --force             If dependencies are installed, it reinstalls all installed components. It also forces installation even when there are non-bower directories with the same name in the components directory. Also bypasses the cache and overwrites to the cache anyway.
    -h, --help              Show this help message
    -p, --production        Do not install project devDependencies
    -S, --save              Save installed packages into the project's bower.json dependencies
    -D, --save-dev          Save installed packages into the project's bower.json devDependencies
    -E, --save-exact        Configure installed packages with an exact version rather than semver
    Additionally all global options listed in 'bower help' are available

Description:

    Installs the project dependencies or a specific set of endpoints.
    Endpoints can have multiple forms:
    - <source>
    - <source>#<target>
    - <name>=<source>#<target>
    
    Where:
    - <source> is a package URL, physical location or registry name
    - <target> is a valid range, commit, branch, etc.
    - <name> is the name it should have locally.
harbin@shangluo:~/Public/project/lanzhou/angular-start$ 

这里的target具体指的是软件包在github上的tag或者branch。既然如此，那么我们在使用的时候，就知道怎么给target取值了。

harbin@shangluo:~/Public/project/lanzhou/angular-start$ bower install angular#1.4.6 --save
bower angular#1.4.6         not-cached https://github.com/angular/bower-angular.git#1.4.6
bower angular#1.4.6            resolve https://github.com/angular/bower-angular.git#1.4.6
bower angular#1.4.6           download https://github.com/angular/bower-angular/archive/v1.4.6.tar.gz
bower angular#1.4.6            extract archive.tar.gz
bower angular#1.4.6           resolved https://github.com/angular/bower-angular.git#1.4.6
bower angular#1.4.6            install angular#1.4.6

angular#1.4.6 bower_components/angular
harbin@shangluo:~/Public/project/lanzhou/angular-start$ 

Difference with

• Bower is dead, long live npm. And Yarn. And webpack.
• What is the difference between Bower and npm
• bower 和 npm 的区别详细介绍

Reference

• Bower official website