Bower快速入门

前言

Bower —— A package manager for the web

bower是一个包管理工具,或者说web资源的管理工具更为贴切。

“包”是什么

“包”是指一系列有意义的资源的集合,在bower这里,更多体现在bower.json文件,它是这些资源的配置文件,一个完整的包都应该有一个bower.json文件。

“管理”包含哪些意思

bower的“管理”包含获取下载安装更新查找,注册等等一系列对资源的操作。想知道更多,可查看Bower Api

bower 与 npm 的关系

npm是专门管理node模块的管理工具,而bower是node的模块,因为bower是依赖nodenpmgit。正如前面所言,npm是擅长的是管理node模块,而bower管理的范围更大,涉及html,css,js和图片等媒体资源。或许,这也是人们喜欢在服务器端使用npm,而在客户端使用bower

如何安装bower

通过npm安装

npm install -g bower

bower 命令

下面列一些经常使用的命令

bower install

bower install [包名|git url|本地路径|文件url|制定版本号|git分支|git tag|...]

这命令可以找到并安装制定的资源。

bower search [关键字]

根据关键字去搜索线上可用的包,进而可以安装列出的任何一个包。

 angular-eha.couchdb-auth git://github.com/eHealthAfrica/angular-eha.couchdb-auth.git
angular-ui-jk git://github.com/volosincu/angular-ui-tooltip.git
angular-jk git://github.com/volosincu/angular-ui-tooltip.git
angular-vn git://github.com/volosincu/angular-ui-tooltip.git
angular-wr git://github.com/volosincu/angular-ui-tooltip.git

bower init

前面说过,使用bower.json文件来管理一个包,因此也可以创建自己的包。 一开始根本就没有bower.json文件怎么办?那就让bower init命令来办。 bower init会在询问你的过程中创建bower.json文件,如下:

spy@spy:~$ bower init
? name: bower-demo
? version: 0.0.1
? description: This is bower demo
? main file:
...

OK,现在你有了包的配置文件了,那就可以创建自己的专属包了。

实践一下

设想要开发一个页面,你要依赖一些框架和库,例如angularjs,requestjs,underscore, grunt等等。 事实上,angularjs,requestjs,underscore在生产环境属于必要的包,grunt相对属于开发环境必要的包,因此我们可以通过bower这样下载:

bower install angularjs --save  // --save 则表示保存到"dependencies"对象中。
bower install requestjs --save
bower install requestjs --save
bower install grunt --save-dev // --save-dev 则表示保存到"devDependencies"对象中。

既然这些资源都在本地中,你可以尽情的引用来是使用了。

按照上面的做法,例如,我创建了一个前端开发的较为齐全的包,就可以挂在git或者bower的官网上了。而你要做的是,只把这个bower.jsonpush到线上即可。别人通过下载这个bower.json文件,在已经安装bower的前提下,直接运行bower install就可以使用这个前端开发包了。

Spy 08 May 2015