前言
我很兴奋的宣布，我已经开始我的个人挑战，一个月内每天学习一项新技术并且用blog记录。我也会尝试做一些小录制。每天用工作之外，我将花几个小时学习新技术，花一个小时记录我所学。这次挑战的目的是熟悉圈里的新技术。我主要关注在JavaScript和相关技术上，但是也包括Java等其他技术。有些技术我可能会花几天，不过每次会挑新的主题。不管意义何在，我都会用OpenShift来展示它怎样实现的。我希望这既有趣又是好的学习体验，祝福我吧！
第一章，我决定学习Bower.
什么是Bower?
Bower 是一个对客户端技术的包管理工具。可以用于搜索，安装，卸载Web包，如JavaScript,HTML,CSS.它是一个很灵活的工具，为开发者提供了很多选择。还有一些工具是基于Bower创建的如YeoMan,Grunt.这些将在后面几章讨论。
为什么关注Bower？
1。节约时间：
首先我选择学习Bower的原因是它会在我试图搜索客户端依赖关系时节约时间。每次当我要用jQuery时，我必须去jQuery网站要么下载安装包要么使用CDN加载。但是如果用Bower，你可以只用运行command就可以在你本地安装jQuery了。你也不必记住版本号。你可以使用Bower command查找任何帮助信息。
2。脱机工作：
Bower在你本地主目录创建了一个 .bower的文件夹，当你安装一个包时，它会把所有配置文件都下载到文件夹里，这样你可以脱机使用。如果你对Java熟悉，Bower就像Maven的*.m2*仓库。每次你下载仓库的时候它都会在两个文件夹下安装Libraay, 一个在你的程序文件夹，一个在主目录的.bower下，这样，下次你需要用到仓库的时候它就直接从.bower下提取。
3。便捷表示包依赖：
你可以为你的包依赖创建一个bower.json的文件，任何时候你想知道你所用的libraries时都可以通过这个找到。
4。更新方便：
假设一个library发布了重要的安全更新，为了安装这个更新，你只需要运行command和bower就可以了。
前提准备
在装bower前你需要先安装：
1. Node：
下载最新的node.js http://nodejs.org/
2. NPM:
NPM是Nodejs的包管理器。和Nodejs安装时绑定。就是说要是你安装了Node你就会有NPM.
3. Git:
你需要安装Git,因为有些需要从Git获取代码包。所以，装吧。
安装Bower
准备工作做好后你就可以安装Bower了，安装命令如下：
$ npm install -g bower
以上方式是全局安装，-g表示全局。
开始使用Bower
当你装完Bower，就可以使用command了。看看bower能做些什么，运行help command，显示如下：
$ bower help 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 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 Options: -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
安装包
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了，试着用它新建一个HTML5文件。
<!doctype html> <html> <head> <title>Learning Bower</title> </head> <body> <button>Animate Me!!</button> <div style="background:red;height:100px;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>
从这你可以看出，你只需要引用jqery.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' }
卸载包
我们可以用bower.json来更简单的安装包。你可以在程序根目录下新建一个bower.json的文件夹再指定它的依赖关系。用 init 创建如下：
$ bower init [?] name: blog [?] version: 0.0.1 [?] description: [?] main file: [?] keywords: [?] authors: Shekhar Gulati <shekhargulati84@gmail.com> [?] 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 <shekhargulati84@gmail.com>' ], license: 'MIT', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ], dependencies: { jquery: '~2.0.3' } } [?] Looks good? Yes
可以查看bower.json文件
{ "name": "blog", "version": "0.0.1", "authors": [ "Shekhar Gulati <shekhargulati84@gmail.com>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~2.0.3" } }
你会注意到它是加在jQuery依赖关系中。
现在假设我们也想用twitter bootstrap. 我们可以安装bootstrap 更新bower.json, 使用如下：
$ bower install bootstrap --save
它会安装最新的bootstrap,也会更新bower.json:
{ "name": "blog", "version": "0.0.1", "authors": [ "Shekhar Gulati <shekhargulati84@gmail.com>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~2.0.3", "bootstrap": "~3.0.0" } }
这就是第一天的！希望能让你对bower有足够的了解，可以自己试试！
原文：https://www.openshift.com/blogs/day-1-bower-manage-your-client-side-dependencies