ubuntu14.04 bower的使用

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.官网
2.参考-中文
3.参考-原文（英文）