前端包管理器Bower

 2015年05月18日    916     声明


Bower是一个客户端软件包管理插件,可以用于搜索、安装和卸载如JavaScript、HTML、CSS之类的web资源包。Bower运行于git之上,Bower不仅会安装你所要安装包,还会自动安装其所依赖的包,自动管理其依赖关系。使用Bower会让web端资源管理更简单和方便。


Bower安装

$ npm install -g bower

Bower依赖于Node.js和npm,安装Bower前应该先安装Node.js和npm,由于Bower需要从git上下载所需资源,因此安装Bower前应该先安装git源代码。建议安装Bower时使用-g参数全局安装,以方便在所有项目中使用。


Bower使用

语法格式

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


Bower初始化

bower init

使用init命令初始化Bower时,Bower会提示你输入一些初始化信息,如:名称、版本号等。初始化后会在当前目录下生成一个bower.json文件,Bower就是根据此文件对前端包进行管理的。在Node.js Express框架下使用Bower时,建议在public文件下执行初始化命令,以方便页面引用。生成的bower.json文件内容如下:

{
  "name": "bower",
  "version": "0.0.0",
  "authors": [
    "liuht "
  ],
  "description": "前端包管理",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {}         //使用--save参数安装包后,包名会添加到此节点中
}


使用Bower安装包和包依赖

# 安装bower.json文件中dependencies节点定义的依赖包
$ bower install
 
# 安装所需包及其并保存到bower.json文件中
$ bower install  --save
 
# 安装指定版本的包并保存到bower.json文件中
$ bower install # --save


使用Bower查找所需包

例如:使用Bower查找jquery

$ bower search jquery
Search results:

    jquery git://github.com/jquery/jquery.git
    jquery-ui git://github.com/components/jqueryui
    ……


查看Bower已安装的包

$ bower list
bower check-new      Checking for new versions of the project dependencies..
itbilu#0.0.0 /Users/liuht/code/itbilu/public
└── jquery#2.1.4


Bower已安装包的调用

在Express框架中,public文件夹被设置成了静态资源文件夹,而Bower刚才又被初始化到了public文件夹中,因些在相关html页面head节点中添加如下引用即可

<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>


Bower包卸载

包卸载使用uninstall命令,如:卸载jquery包:

bower uninstall jquery

以上命令并不会从bower.json文件的dependencies节点中删除包名,需要删除时请增加--save参数。


通过以上介绍,就可以使用Bower管理前端包了,可以看出Bower的包管理机制和npm的包管理机制有些类似。更多使用方法可以使用bower命令或bower ?命令或bower --help命令查看详细,也可以参考其官方文档:bower.io