1.Bower是什么?
Bower A package manager for the web
Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。他作为一个js依赖管理的工具,提供一种理想包管理方式,借助了npm的一些思想,为我们提供一个舒服的开发环境。
2.Bower的安装
我的安装环境是在ubuntu14.04
2.1.前提条件是需要安装nodejs和git,bower是从git上下载网络资源的。
2.2.使用nodejs的npm来安装bower
npm install -g bower
其中-g命令表示全局安装
2.3.检验是否安装成功
bower -v
如果安装成功输出:
1.7.7
3.Bower的使用
3.1.查看bower功能支持
stephen@stephen:~$ bower
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
login Authenticate with GitHub and store credentials
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
unregister Remove a package from the registry
version Bump a package version
Options:
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --loglevel 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
-v, --version Output Bower version
--no-color Disable colors
See 'bower help <command>' for more information on a specific command.
3.2.创建测试bower_test project
stephen@stephen:~$ mkdir bower_test
stephen@stephen:~$ cd bower_test
stephen@stephen:~/bower_test$ mkdir app
stephen@stephen:~/bower_test$ tree
.
└── app
1 directory, 0 files
目前我们的目录结构
3.3.我们在根目录(/bower_test)下创建**.bowerrc**文件
3.4.在2创建的文件中添加如下内容:
{
"directory" : "app"
}
**.bowerrc**文件是自定义bower下载的代码包的目录位置,即我们下载的资源将放在app/下面
3.5.查看当前的目录结构
stephen@stephen:~/bower_test$ tree -a
.
├── app
└── .bowerrc
3.6.brower的初始化工作
在我们.bowerrc同级,也就是主目录下执行命令**bower init**,根据提示会生成bower.json的配置文件。
stephen@stephen:~/bower_test$ bower init
? name bower_test
? description "test for bower"
? main file "test"
? what types of modules does this package expose?
? keywords "test keywords"
? authors Stephen Huang <stephen_huang_@hotmail.com.com>
? license MIT
? homepage www.baidu.com
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
{
name: 'bower_test',
authors: [
'Stephen Huang <stephen_huang_@hotmail.com.com>'
],
description: '"test for bower"',
main: '"test"',
moduleType: [],
keywords: [
'"test',
'keywords"'
],
license: 'MIT',
homepage: 'www.baidu.com',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'app',
'test',
'tests'
]
}
? Looks good? Yes
目前的结构
stephen@stephen:~/bower_test$ tree -a
.
├── app
├── bower.json
└── .bowerrc
1 directory, 2 files
3.7.包的安装
如果我们现在需要安装bootstrap
bower install jquery --save
然后bower就会从远程下载jquery最新版本到你的app/目录下
stephen@stephen:~/bower_test$ bower install jquery --save
bower jquery#* cached git://github.com/jquery/jquery-dist.git#2.2.1
bower jquery#* validate 2.2.1 against git://github.com/jquery/jquery-dist.git#*
bower jquery#^2.2.1 install jquery#2.2.1
jquery#2.2.1 app/jquery
其中–save参数是保存配置到你的bower.json,你会发现bower.json文件已经多了一行
"dependencies": {
"jquery": "^2.2.1"
}
3.8.包的信息
bower info jquery
会看到jquery的bower.json的信息,和可用的版本信息
3.9.包的更新
bower update
3.10.包的卸载
bower uninstall jquery
3.11.包的查找
还有一个很重要的功能,就是包的查找,比如我想要安装bootstrap的某个插件,但是记不住名字了,就可以直接在命令行输入:
bower search bootstrap
4.参考
1.官网:http://bower.io/