1. 什么是 bower，有什么作用

富客户端要求的前端开发，少不了大量的前端库文件引用，于是就可能遇到如下问题：

• 逐个下载、复制到期望位置嫌麻烦
• 库之间的依赖/版本依赖不清楚，总是出问题
• 版本升级时重复性的操作，还易搞错
• …

使用 bower 这样的包管理工具，可以很好的处理类似如上描述的问题。其实各种包管理工具的主要职责均类似如此。

2. bower 安装

需要系统已安装 nodejs。命令提示符下，执行如下命令安装 bower：

npm install bower -g

3. bower 命令

执行 bower help 命令，可以查看其所有命令及参数介绍：

Usage:

bower <command> [<args>] [<options>]
Commands:

cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages – and possible updates
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
version Bump a package version
Options:

-f, –force Makes various commands more forceful
-j, –json Output consumable JSON
-l, –log-level What level of logs to report
-o, –offline Do not hit the network
-q, –quiet Only output important information
-s, –silent Do not output anything, besides errors
-V, –verbose Makes output more verbose
–allow-root Allows running commands as root
–version Output Bower version
See ‘bower help <command>’ for more information on a specific command.

命令简介：

cache: bower 缓存管理
help: 显示 Bower 命令的帮助信息
home: 通过浏览器打开一个包的 github 发布页
info: 查看包的信息
init: 创建 bower.json 文件
install: 安装包到项目
link: 在本地 bower 库建立一个项目链接
list: 列出项目已安装的包
lookup: 根据包名查询包的 URL
prune: 删除项目无关的包
register: 注册一个包
search: 搜索包
update: 更新项目的包
uninstall: 删除项目的包

4. 使用 bower 下载库

作为各种库的管理工具，bower 主要就是对它们下载和管理。
举例，我们新建了一个项目，目录为 lzwme，我们的项目需要如下前端库：jquery 1.11.1、bootstrap、jquery UI、d3、datatables 1.10.2、echarts 、moment、backbone、seajs 。

针对项目 lzwme，我们可依次执行如下命令：

bower install jquery#1.11.1 –save
bower install bootstrap –save
bower install d3 –save
bower install jqueryui –save
bower install datatables#1.10.2 –save
bower install echarts –save
bower install moment –save
bower install backbone –save
bower install seajs –save

执行完每一条命令后，bower 都会自动下载对应库文件到 bower_components/ 目录，同时还会下载其依赖库，如下载 backbone 的同时还会下载 underscore。

bower 可使用如下几种方式下载文件

# 已注册的包，使用简写即可
$ bower install jquery
# GitHub 上的项目，使用名称即可
$ bower install desandro/masonry
# GitHub上的项目
$ bower install git://github.com/user/package.git
# 直接通过 URL 下载
$ bower install http://example.com/script.js

安装命令有如下参数可选：

-F, –force-latest: 不管冲突问题强制使用最新版本
-p, –production: 安装生产环境的库，不安装开发环境所需的文件
-S, –save: 将安装的包信息保存到项目的 bower.json 依赖配置中
-D, –save-dev: 将已安装的包信息保存到项目开发环境的 bower.json 依赖中

5. bower 功能使用举例

5.1. 查看已安装的库列表

bower list

lzwme D:\_development\lzwme
├─┬ backbone#1.1.2 extraneous
│ └── underscore#1.7.0
├─┬ bootstrap#3.2.0 extraneous
│ └── jquery#1.11.1 (2.1.1 available)
├── d3#3.4.13 extraneous
├─┬ datatables#1.10.2 extraneous (latest is 1.10.3)
│ └── jquery#1.11.1 (2.1.1 available)
├── echarts#2.0.4 extraneous
├── impress.js#0.5.3 extraneous
├── jquery#1.11.1 extraneous (latest is 2.1.1)
├─┬ jqueryui#1.11.2 extraneous
│ └── jquery#1.11.1 (2.1.1 available)
├── moment#2.8.3 extraneous
└── seajs#2.3.0 extraneous

5.2. 更新某个库

bower update <package-name>

5.3. 卸载某个库

$ bower uninstall <package-name>

5.4 查看本地缓存的库

bower cache list

backbone=git://github.com/jashkenas/backbone.git#1.1.2
bootstrap=git://github.com/twbs/bootstrap.git#3.2.0
d3=git://github.com/mbostock/d3.git#3.4.13
datatables=git://github.com/DataTables/DataTables.git#1.10.2
echarts=git://github.com/ecomfe/echarts.git#2.0.4
impress.js=git://github.com/bartaz/impress.js.git#0.5.3
jquery=git://github.com/jquery/jquery.git#1.11.1
jquery=git://github.com/jquery/jquery.git#2.1.1
jquery-ui=git://github.com/components/jqueryui.git#1.11.2
moment=git://github.com/moment/moment.git#2.8.3
seajs=git://github.com/seajs/seajs.git#2.3.0
underscore=git://github.com/jashkenas/underscore.git#1.7.0

5.5 查看某个库的主页

bower lookup jquery

D:\_development\lzwme>bower lookup jquery
jquery git://github.com/jquery/jquery.git

4.6 提交自己的类库到官方

请参考这里：http://bower.io/docs/creating-packages/

6. 使用下载的库

通过 bower 可以方便的对库文件进行下载、更新，但是我们不提倡在项目中直接使用 bower_components 目录，一方面这里的的文件可能并不是都是项目需要的，另一方面，如果项目中存在安全问题的文件，那么就会产生隐患了。

那么该如何使用这些文件呢，你可以自己选择复制到项目配置的目录中。当然，志文工作室还是推荐你使用自动化构建工具来快捷管理。
bower 推荐使用前端自动化构建工具 grunt （http://lzw.me/a/grunt-getting-started.html），并推荐了几个对应插件：

grunt-bower-concat
 grunt-wiredep
 grunt-bower-requirejs
 grunt-bower-task
 grunt-preen

http://bower.io/docs/tools/

7. 更多参考

http://bower.io/
https://github.com/bower/bower
https://github.com/yatskevich/grunt-bower-task