今天自己用Angular寫東西的時候，下載了Angular-seed項目，發現需要用到bower，之前也使用過，沒有仔細了解，今天趁機了解到一些。
bower的官網地址: http://bower.io/
Bower是一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。它擅長前端的包管理，通過其API展示了包依賴模型。使得項目不存在系統級的依賴，不同的應用程序間也不會共享依賴，整個依賴樹是扁平的。
為什么使用Bower？摘自segmentfault
-
節省時間。為什么要學習Bower的第一個原因，就是它會為你節省尋找客戶端的依賴關系的時間。每次我需要安裝jQuery的時候，我都需要去jQuery網站下載包或使用CDN版本。但是有了Bower，你只需要輸入一個命令，jquery就會安裝在本地計算機上，你不需要去記版本號之類的東西，你也可以通過Bower的info命令去查看任意庫的信息。
-
脫機工作。Bower會在用戶主目錄下創建一個.bower的文件夾，這個文件夾會下載所有的資源、並安裝一個軟件包使它們可以離線使用。如果你熟悉Java，Bower即是一個類似於現在流行的Maven構建系統的.m2倉庫。每次你下載任何資源庫都將被安裝在兩個文件夾中 —— 一個在的應用程序文件夾，另一個在用戶主目錄下的.bower文件夾。因此，下一次你需要這個倉庫時，就會用那個用戶主目錄下.bower中的版本。
-
可以很容易地展現客戶端的依賴關系。你可以創建一個名為bower.json的文件，在這個文件里你可以指定所有客戶端的依賴關系，任何時候你需要弄清楚你正在使用哪些庫，你可以參考這個文件。
-
讓升級變得簡單。假設某個庫的新版本發布了一個重要的安全修補程序，為了安裝新版本，你只需要運行一個命令，bower會自動更新所有有關新版本的依賴關系。
Bower依賴於NodeJS和npm。可以使用npm全局安裝Bower，-g 操作表示全局。
npm install -g bower
需要注意的是，Bower的運行，依賴於版本控制工具git，從github拉取以來信息。
下面的命令可以更新或卸載Bower。
npm update -g bower
npm uninstall -global bower
開始使用Bower
安裝完bower之后就可以使用所有的bower命令了。可以鍵入help 命令來查看bower可以完成那些操作，如下：
bower help
用法:
bower <command> [<args>] [<options>]
命令Commands:
cache-clean 清除Bower的緩存，或清除指定包的緩存 completion Bower的Tab鍵自動完成 help 顯示Bower命令的輔助信息 info 指定包的版本信息和描述 init 交互式的創建bower.json文件 install 安裝一個本地的包 link 包目錄的符號連接 list, ls 列出所有已安裝的包 lookup 根據包名查詢包的URL register 注冊一個包 search 根據包名搜索一個包 uninstall 刪除一個包 update 更新一個包
選項:
--no-color 關閉彩色輸出(適合Bower的所有命令)
還可以使用命令'bower help <command>'來查看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
Bower會使用庫的名字，去在線索引中搜索該庫的網址。某些情況下，如果一個庫很新（或者你不想使用默認網址），可能需要我們手動指定該庫的網址。
bower install git://github.com/documentcloud/backbone.git bower install http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js bower install ./some/path/relative/to/this/directory/backbone.js
上面的命令說明，指定的網址可以是github地址、http網址、本地文件。
默認情況下，會安裝該庫的最新版本，但是也可以手動指定版本號。
bower install jquery-ui#1.10.1
上面的命令指定安裝jquery-ui的1.10.1版。
如果某個庫依賴另一個庫，安裝時默認將所依賴的庫一起安裝。比如，jquery-ui依賴jquery，安裝時會連jquery一起安裝。
安裝后的庫默認存放在項目的bower_components子目錄，如果要指定其他位置，可在.bowerrc文件的directory屬性設置。
包的使用
現在就可以在應用程序中使用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 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
配置文件.bowerrc
項目根目錄下（也可以放在用戶的主目錄下）的.bowerrc文件是Bower的配置文件，它大概像下面這樣。
{ "directory" : "components", "json" : "bower.json", "endpoint" : "https://Bower.herokuapp.com", "searchpath" : "", "shorthand_resolver" : "" }
其中的屬性含義如下。
- directory：存放庫文件的子目錄名。
- json：描述各個庫的json文件名。
- endpoint：在線索引的網址，用來搜索各種庫。
- searchpath：一個數組，儲存備選的在線索引網址。如果某個庫在endpoint中找不到，則繼續搜索該屬性指定的網址，通常用於放置某些不公開的庫。
- shorthand_resolver：定義各個庫名稱簡寫形式。
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 <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
可以查看該文件：
{ "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，我們可以用下面的命令安裝twitter 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.json文件以后，就可以用bower install命令，一下子安裝所有庫。
bower install
根據bower.json文件，還可以向Bower的在線索引提交你的庫。
bower register <my-package-name> <git-endpoint> // 比如 bower register jquery git://github.com/jquery/jquery
注意，如果你的庫與現有的庫重名，就會提交失敗，如果你的package-name是駝峰的，也會注冊失敗。
注冊bower庫的例子，我注冊了一個命名color的庫，使用如下命令：
bower register color-namer https://github.com/CraryPrimitiveMan/ColorNamer
顯示信息如下：
bower convert Converted https://github.com/CraryPrimitiveMan/ColorNamer to git://github.com/CraryPrimitiveMan/ColorNamer.git bower resolve git://github.com/CraryPrimitiveMan/ColorNamer.git#* bower download https://github.com/CraryPrimitiveMan/ColorNamer/archive/0.0.1.tar.gz bower progress color-namer#* received 0.1MB bower progress color-namer#* received 0.1MB bower progress color-namer#* received 0.1MB bower progress color-namer#* received 0.2MB bower progress color-namer#* received 0.2MB bower progress color-namer#* received 0.2MB bower progress color-namer#* received 0.2MB bower progress color-namer#* received 0.3MB bower extract color-namer#* archive.tar.gz bower resolved git://github.com/CraryPrimitiveMan/ColorNamer.git#0.0.1 ? Registering a package will make it installable via the registry (https://bower? Registering a package will make it installable via the registry (https://bower.herokuapp.com), continue?: Yes bower register git://github.com/CraryPrimitiveMan/ColorNamer.git Package color-namer registered successfully! All valid semver tags on git://github.com/CraryPrimitiveMan/ColorNamer.git will be available as versions. To publish a new version, just release a valid semver tag. Run bower info color-namer to list the available versions.
可以用如下命令查看注冊的bower庫的信息
bower info color-namer bower info color-namer#0.0.1
這就是今天的學習，希望能讓你對bower有個足夠的了解，最好可以自己嘗試一下。
大部分內容摘自SegmentFault和阮一峰博客