Bower的基本用法 - gintong/go2js GitHub Wiki

全局安装Bower后，可以查看Bower的帮助信息，使用命令： > bower help 用法: 命令Commands:

cache-clean             清除Bower的缓存，或清除指定包的缓存
completion              Bower的Tab键自动完成
help                    显示Bower命令的辅助信息
info                    指定包的版本信息和描述
init                    交互式的创建bower.json文件
install                 安装一个本地的包
link                    包目录的符号连接
list, ls                列出所有已安装的包
lookup                  根据包名查询包的URL
register                注册一个包
search                  根据包名搜索一个包
uninstall               删除一个包
update                  更新一个包

选项:

-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
--no-color              关闭彩色输出(适合Bower的所有命令)

包的安装

Bower是一个软件包管理器，所以你可以在应用程序中用它来安装新的软件包。举例来看一下来如何使用Bower安装JQuery，在你想要安装该包的地方创建一个新的文件夹，键入如下命令：

$ bower install jquery

上述命令完成以后，你会在你刚才创建的目录下看到一个bower_components的文件夹，其中目录如下：

$ tree bower_components/
bower_components/
└── jquery
    ├── README.md
    ├── bower.json
    ├── component.json
    ├── composer.json
    ├── jquery-migrate.js
    ├── jquery-migrate.min.js
    ├── jquery.js
    ├── jquery.min.js
    ├── jquery.min.map
    └── package.json

1 directory, 10 files

包的使用

现在就可以在应用程序中使用jQuery包了，在jQuery里创建一个简单的html5文件：

<!doctype html>
<html>
<head>
     <title>Learning Bower</title>
</head>
<body>
<button>Animate Me!!</button>
<div style="background:red;height:100px;width:100px;position:absolute;">
</div>

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

    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:'250px'});
        });
    });
</script>
</body>
</html>
正如你所看到的，你刚刚引用jquery.min.js文件，现阶段完成。

所有包的列表

如果你想找出所有安装在应用程序中的包，可以使用list命令：

$ bower list

  bower check-new     Checking for new versions of the project dependencies..
  blog /Users/shekhargulati/day1/blog
  └── jquery#2.0.3 extraneous

包的搜索

假如你想在你的应用程序中使用twitter的bootstrap框架，但你不确定包的名字，这时你可以使用search 命令：

$ bower search bootstrap

Search results:

    bootstrap git://github.com/twbs/bootstrap.git
    angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
    sass-bootstrap git://github.com/jlong/sass-twitter-bootstrap.git

包的信息

如果你想看到关于特定的包的信息，可以使用info 命令来查看该包的所有信息：

$ bower info bootstrap

 bower bootstrap#*              not-cached git://github.com/twbs/bootstrap.git#*
 bower bootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
 bower bootstrap#*              download https://github.com/twbs/bootstrap/archive/v3.0.0.tar.gz
 bower bootstrap#*              extract archive.tar.gz
 bower bootstrap#*              resolved git://github.com/twbs/bootstrap.git#3.0.0

 {
   name: 'bootstrap',
   version: '3.0.0',
   main: [
     './dist/js/bootstrap.js',
     './dist/css/bootstrap.css'
   ],
   ignore: [
     '**/.*'
   ],
   dependencies: {
     jquery: '>= 1.9.0'
   },
   homepage: 'https://github.com/twbs/bootstrap'
 }

Available versions:
  - 3.0.0
  - 3.0.0-rc1
  - 3.0.0-rc.2
  - 2.3.2
  .....

如果你想得到单个包的信息，也可以使用info 命令： $ bower info bootstrap#3.0.0

bower bootstrap#3.0.0           cached git://github.com/twbs/bootstrap.git#3.0.0
bower bootstrap#3.0.0         validate 3.0.0 against git://github.com/twbs/bootstrap.git#3.0.0

{
  name: 'bootstrap',
  version: '3.0.0',
  main: [
    './dist/js/bootstrap.js',
    './dist/css/bootstrap.css'
  ],
  ignore: [
    '**/.*'
  ],
  dependencies: {
    jquery: '>= 1.9.0'
  },
  homepage: 'https://github.com/twbs/bootstrap'
}

包的卸载

卸载包可以使用uninstall 命令：

$ bower uninstall jquery

bower.json文件的使用

bower.json文件的使用可以让包的安装更容易，你可以在应用程序的根目录下创建一个名为“bower.json”的文件，并定义它的依赖关系。使用bower init 命令来创建bower.json文件：

$ bower init

[?] name: blog
[?] version: 0.0.1
[?] description:
[?] main file:
[?] keywords:
[?] authors: Shekhar Gulati <[email protected]>
[?] license: MIT
[?] homepage:
[?] 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? No

{
  name: 'blog',
  version: '0.0.1',
  authors: [
    'Shekhar Gulati <[email protected]>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  dependencies: {
    jquery: '~2.0.3'
  }
}

[?] Looks good? Yes
可以查看该文件：

{
  "name": "blog",
  "version": "0.0.1",
  "authors": [
     "Shekhar Gulati <[email protected]>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3"
  }
}

注意看，它已经加入了jQuery依赖关系。

现在假设也想用twitter bootstrap，我们可以用下面的命令安装twitter bootstrap并更新bower.json文件：

$ bower install bootstrap --save

它会自动安装最新版本的bootstrap并更新bower.json文件：

{
  "name": "blog",
  "version": "0.0.1",
  "authors": [
    "Shekhar Gulati <[email protected]>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "bootstrap": "~3.0.0"
  }
}

原文 Day 1: Bower--Manage Your Client Side Dependencies 翻译 SegmentFault

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️