官網地址:https://bower.io/
網站由很多東西組成 - 框架,庫,一個大型網站有很多人一塊創建,那么因為版本或者其他的原因導致文件重復,或者不是最新的。例如:jq的版本不一樣但是都是jq。bower就是用來管理這些文件的,解決重復的組件、庫,讓所有的文件都是最新版本的。
下面詳細介紹bower的安裝到使用
1、安裝bower
在終端執行
npm install -g bower
便可完成安裝,安裝完成之后執行
bower -v
2、創建一個測試目錄
mkdir bower-in-action
bower-in-action是問價名。
進入這個文件:
cd bower-in-action/ 進入這個目錄
mkdir query-bootstrap-in-action 創建一個項目目錄(以jq bootstrap為例)
cd jquery-bootstrap-in-action/ 進入這個目錄當前目錄是空的
通常使用jq bootstrap去官網下載,然后放到項目里面。現在bower做這些事情。
bower install jquery 執行變回自動查找jq並下載
bower install bootstrap執行下載bootstrap
bower install 加組件名便可以下載。
當然bower install 后可以使 github 上組件的名字或者gitub上右側的github地址或者是網頁的url。這幾種都行。
執行 ls -al 便可以看見新建的文件夾下邊多了一個文件夾bower_components
cd bower_components/進入這個文件夾
執行 ls -al 便可一看見該目錄下多了兩個文件夾 jq 和 bootstrap
rm - rf jquery 便可以刪除jq文件夾,在這個文件的根目錄下
3、bower的配置文件
(a)、bower有兩個配置文件分別為:bower.json 和 .bowerrc
bower.json:這個文件的意思是,多人開發的項目,為了避免組件的重復並且保證都是最新,代碼唄提交之后只需要執行,
bower install
bower會自己根據這個文件的配置去檢查。
bower.json文件的生成方法:
cd.. 回到文件夾的根目錄,在根目錄下執行 bower init 他會給出提示
1、默認文件名 回車就行
2、默認版本還 回車就行
3、描述: test bower by using jq & bootstrap
4、main file 項目的入口文件 暫時為空 回車
5、幾種文件租房時 為空就行
6、關鍵詞
7、作者
8、yes
9、y
10、y
執行ls -al變可以看見目錄下多了一個 bower.json文件
vim bower.json查看這個文件\
執行:wq返回文件根目錄
.json的配置文件變完成了。
(b)、.bowerrc文件
這個文件一般情況下是不會使用的,有的公司為了安全性考慮,在上網的時候要使用代理才能上網,這樣bower要下載文件,得需要代理
vim .bowerrc 回車 進入文件 點擊 esc 最底下變為 insert 編輯文件 proxy代表什么呢:騰訊的代理 http://proxy.tencent.com:8080 如果是https的 https-proxy : http://proxy.tencent.com:8080 如果網路非常的差或者非常好 timeout : 6000也就是1分鍾 這里是一個數值 默認單位是毫秒 { "directory": "bower_components", "proxy": "http://proxy.tencent.com:8080", "https-proxy": "https://proxy.tencent.com:8080", "timeout":6000 }
:w 然后執行 :q便可以保存回到文件根目錄。
不編寫的直接 :wq便回到文件根目錄。
到這里bower的配置就全部完成了。
在項目中要用到組件還是以前的方法 src 或者 href 便可以了,但是這樣旺旺會很麻煩,文件目錄層級多了就會很復雜,所以就要配合grunt的使用了。
總結:
一般來說在根目錄下先創建配置文件,配置文件好了之后,再去下載所需要的第三方文件,這個時候執行的命令為
bower install --save jquery
執行 --save 才能將下載的文件,直接配置到配置文件中不需要去手動再去配置。