感覺再不學習前端自動化就要out了,這兩天一直再摸索,先從bower的使用學起。
反正這個部落格都沒人看,今天周日就把之前學到的整理一下,就當做一下學習筆記吧。
bower官網:bower.io(有詳細各種指令的用法)其實直接看bower --help也可以
什麼是bower?
bower是一個管理包的工具
用之前當然先知道為什麼要用,是以,首先我要問自己,為什麼要使用bower?
1.以前我如果要使用一個庫,一般是到官網或者github上下載下傳,而bower隻需要一個簡單的install指令就可以安裝需要的庫,省事
2.如果我需要用的庫更新了,我想使用新的版本,我隻需要一個bower update指令就可以更新了,不用再重新跑去網站上下載下傳,而且如果我使用的庫A對另外一個庫B有依賴,庫B更新了,也同樣隻需update一下就行了
3.通過bower list可以清楚地看到庫的依賴關系,而且可以用prune智能地删除與這個項目無關的包
下面就說說bower的指令:
—————————————————————————————————————————————————————————
install
這個無疑是最重要一個指令,執行bower install [包名]就可,一般包會被安裝到目前目錄的 bower_components子檔案夾下
看看官網上的介紹

1.如果要安裝的是已經在bower上注冊過的包,可直接bower install [包名]就可,如bower install jquery
2.如果要安裝的是沒有在bower上注冊過的包,可以使用以下方法:
(1)通過github的短寫安裝
如:jquery在github上的的短寫名
執行bower install jquery/jquery
(2)通過完整的github位址
如:bower install https://github.com/jquery/jquery
(3)或者直接通過檔案的url,如上圖最後一個
—————————————————————————————————————————————————————————
list
[-- 列出項目所安裝的包,其中還會列出每個包的依賴庫 --]
執行 bower list :
可以看到安裝了三個包:bootstrap,d3,jquery,其中的bootstrap是依賴jquery的
—————————————————————————————————————————————————————————
uninstall
[-- 解除安裝 删除項目的包 --]
在安裝bootstrap後試試解除安裝bootstrap依賴的jquery:
發現已經報錯
————————————————————————————————————————————————————————
update
[-- 更新項目的包 --]
接着上面uninstall的指令,再嘗試裝一個低版本的jquery,再bower list一下,會發現又報錯,因為bootstrap依賴的jquery是要1.9.1以上的
是以此時update的作用就來了,執行一下bower update jquery就能更新包了,自動把包更新到最新版本
平時如果要更新項目下的所有包,隻需要執行bower update(更新全部包)
——————————--————————————————————————-——————————————————————————————————————————
其他一些常用指令
lookup
[-- 查詢這個包的位址 --]
bower lookup 包名 就可以打開該包的網址
info
[-- 檢視包的資訊 --]
比如檢視jquery包的資訊 :bower info jquery,這時候一般會列出全部版本
假如隻想檢視其中某個版本的資訊,可以執行 :bower info jquery#版本号
prune
[-- 删除項目無關的包 --]
(智能地判斷這個項目沒有引用這個包,而且這個包與其他包并沒有依賴關系)
search
[-- 搜尋包 --]
cache
[-- bower緩存管理 --]
執行bower cahe list
————————————————---————————————————————————————————————————————————————————————
關于bower.json
bower.json 有點像nodejs的package.json
要在目前目錄下生成bower.json檔案,隻需要執行bower init就可以了
關于生成的bower.json檔案,注意:
dependencies是生産環境的,devdependencies是開發環境的,這跟package.json是一樣的
如果要通過指令行編輯,bower.json,為dependencies或devdependencies增加内容,可以通過以下指令
比如要在生産環境中安裝bootstrap 執行bower install bootstrap --save
在開發環境中安裝angular.js 執行bower install angular --save-dev