Day 1: Bower —— 管理你的客户端依赖关系
我決定將第一天的學習主題選為Bower。
什么是Bower？
Bower是一個客戶端技術的軟件包管理器，它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。其他一些建立在Bower基礎之上的開發工具，如YeoMan和Grunt，這個會在以后的文章中介紹。
為什么我會在意Bower？
節省時間。為什么要學習Bower的第一個原因，就是它會為你節省尋找客戶端的依賴關系的時間。每次我需要安裝jQuery的時候，我都需要去jQuery網站下載包或使用CDN版本。但是有了Bower，你只需要輸入一個命令，jquery就會安裝在本地計算機上，你不需要去記版本號之類的東西，你也可以通過Bower的info命令去查看任意庫的信息。
脫機工作。Bower會在用戶主目錄下創建一個.bower的文件夾，這個文件夾會下載所有的資源、并安裝一個軟件包使它們可以離線使用。如果你熟悉Java，Bower即是一個類似于現在流行的Maven構建系統的.m2倉庫。每次你下載任何資源庫都將被安裝在兩個文件夾中 —— 一個在的應用程序文件夾，另一個在用戶主目錄下的.bower文件夾。因此，下一次你需要這個倉庫時，就會用那個用戶主目錄下.bower中的版本。
可以很容易地展現客戶端的依賴關系。你可以創建一個名為bower.json的文件，在這個文件里你可以指定所有客戶端的依賴關系，任何時候你需要弄清楚你正在使用哪些庫，你可以參考這個文件。
讓升級變得簡單。假設某個庫的新版本發布了一個重要的安全修補程序，為了安裝新版本，你只需要運行一個命令，bower會自動更新所有有關新版本的依賴關系。
前提準備
為了安裝bower，你首先需要安裝如下文件：
安裝Bower
一旦你已經安裝了上面所說的所有必要文件，鍵入以下命令安裝Bower：
$ npm install -g bower這行命令是Bower的全局安裝，-g 操作表示全局。
開始使用Bower
安裝完bower之后就可以使用所有的bower命令了。可以鍵入help 命令來查看bower可以完成那些操作，如下：
$ bower help Usage:bower <command> [<args>] [<options>]Commands:cache Manage bower cachehelp Display help information about Bowerhome Opens a package homepage into your favorite browserinfo Info of a particular packageinit Interactively create a bower.json fileinstall Install a package locallylink Symlink a package folderlist List local packageslookup Look up a package URL by nameprune Removes local extraneous packagesregister Register a packagesearch Search for a package by nameupdate Update a local packageuninstall Remove a local packageOptions:-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.json1 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.gitangular-bootstrap git://github.com/angular-ui/bootstrap-bower.gitsass-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 jquerybower.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有個足夠的了解，最好可以自己嘗試一下。
原文 Day 1: Bower--Manage Your Client Side Dependencies
翻譯 SegmentFault
from: http://segmentfault.com/a/1190000000349555
總結
以上是生活随笔為你收集整理的Day 1: Bower —— 管理你的客户端依赖关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 30 天学习 30 种新技术系列
- 下一篇： Day 2: AngularJS ——