參考鏈接：https://bower.io/ 官網(wǎng)
1. Bower 的介紹
- 這個(gè)所謂的包指的是例如 jquery 這種的，假設(shè)我們現(xiàn)在需要一個(gè)庫腮出，這個(gè)庫有很多其他的依賴，我們需要關(guān)注這些依賴的最新情況抄瓦，我們不可能手動(dòng)的去將這些依賴更新為最新的截型，這時(shí)我們就需要一個(gè)這樣的包管理器，只需要一行命令便會(huì)自動(dòng)地將需要更新的所有依賴全部更新一遍轿秧，所有的依賴它都能去處理中跌，這就是 Bower 最強(qiáng)大的地方
它跟 npm 有很多相像的地方，npm 是依托于 NodeJS 菇篡，所有的包都要在 https://www.npmjs.com/ 官網(wǎng)上放一個(gè)倉庫漩符，但是 Bower 它是可以支持松散型 git 你可以把你的項(xiàng)目全都扔到 git 上，然后由它來指定構(gòu)建工具驱还，npm 提供了一套完整的 打包 -> 測(cè)試 -> 單元 -> 部署 以及相關(guān)的構(gòu)成文檔嗜暴，更多的差別是 Bower 是一種前端的包管理器，npm 是一種模塊化的包管理器议蟆，它們處理所有的依賴關(guān)系的方法也不同闷沥，對(duì)于 npm 來說 它是一種樹狀結(jié)構(gòu) a b c 下面有相應(yīng)的依賴且可以相互共享這些都沒有問題，但是 Bower 就不行咐容，他一定要有獨(dú)立的對(duì)應(yīng)的這種版本
每種開發(fā)工具都各有不同舆逃，我們建議開發(fā)的時(shí)候是 npm 結(jié)合 Bower 共同使用，npm 負(fù)責(zé)整個(gè)我們項(xiàng)目中官網(wǎng) https://www.npmjs.com/ 的這種項(xiàng)目包疟丙，Bower 可以處理我們前端所需要的這種靜態(tài)的一些資源颖侄，npm 也有更多的像算法這樣的包，可以隨意地去安裝享郊，在 npm 官網(wǎng)上有一個(gè) 包安裝熱度的排名 Bower 和其他幾個(gè)我們所熟知的一直長期的在前幾名當(dāng)中览祖，有標(biāo)記的是之前接觸學(xué)習(xí)過的
image.png
在前端構(gòu)建工具中，包管理是一個(gè)非常重要的模塊炊琉，他可以省去我們開發(fā)上的很多大量的重復(fù)性的勞動(dòng)展蒂，以及我們更新不及時(shí)造成的各種各樣的問題，希望大家可以更好地利用這些包管理器在項(xiàng)目里很好地去控制項(xiàng)目中各種各樣的資源
2. Bower 的安裝
參考鏈接：https://www.npmjs.com/package/bower npm -> bower
- Bower 是一個(gè)全局的命令苔咪，它只要裝到全局就可以直接使用了锰悼，它不像 Gulp 和 Grunt 需要安裝本地項(xiàng)目中一份
- 在命令行中全局安裝
$ npm install -g bower
- 輸入
bower想看相關(guān)命令
//這些是項(xiàng)目中一些常用到的命令
cache -> bower 緩存管理，它可以看到當(dāng)前的有多少東西進(jìn)行了緩存
help -> 顯示 bower 命令的幫助信息
home -> 通過瀏覽器打開一個(gè)包的 github 發(fā)布頁
info -> 查看包的信息团赏，包的信息他可能有一些依賴等等
init -> 創(chuàng)建 bower.json 文件
install -> 安裝包到項(xiàng)目（最重要的一個(gè)）箕般，他可以將你想要的包安裝到項(xiàng)目里面
link -> 在本地 bower 庫建立一個(gè)項(xiàng)目鏈接，跟 Linux 中的軟鏈?zhǔn)且荒Ｒ粯拥?br>
list -> 列出項(xiàng)目已安裝的包舔清，就是把你當(dāng)前項(xiàng)目里面所有安裝的包都給你列出來
lookup -> 根據(jù)包名查詢包的 URL丝里，它能找到你當(dāng)輸入的包的 URL（github 地址）
prune -> 刪除項(xiàng)目無關(guān)的包曲初，這個(gè) 就非常智能了，它判斷里面沒有引用這些相關(guān)的包杯聚，而且這些包也沒有跟項(xiàng)目中的什么有任何的關(guān)聯(lián)臼婆，他可能就會(huì)把你的這些包給干掉了
register -> 注冊(cè)一個(gè)包，這個(gè)就是允許我們自己注冊(cè)一個(gè)包幌绍，把我們的這個(gè)包發(fā)布到 git 上颁褂，讓別人也可以去下載、注冊(cè)等等
search -> 搜索包傀广，我們想要一個(gè)包的話颁独，可以自己去搜
update -> 更新項(xiàng)目的包，我們想要一個(gè)包主儡，但是它跟別人的項(xiàng)目更新的不及時(shí)奖唯，執(zhí)行以下這個(gè)就可以了
uninstall -> 刪除項(xiàng)目的包，刪除項(xiàng)目中依賴的某個(gè)包
# 3\. Bower 的應(yīng)用
> 參考鏈接：[https://bower.io/](https://link.jianshu.com?t=https://bower.io/) 官網(wǎng)
1. 安裝包
bower install <package>
示例
installs the project dependencies listed in bower.json
$ bower install
registered package
$ bower install jquery
GitHub shorthand
$ bower install desandro/masonry
Git endpoint
$ bower install git://github.com/user/package.git
URL
$ bower install http://example.com/script.js
2. 接下來就做一個(gè) demo 糜值，在桌面新建一個(gè) bowertest 文件夾丰捷，并在命令行中進(jìn)入該目錄
cd Desktop
mkdir bowertest
cd bowertest
3. 安裝 jquery 包到項(xiàng)目中
bower install jquery
命令行中顯示如下
>
> 沒有緩存 -> 決定 -> 下載 -> 提取 -> 決定 -> 安裝
4. 此時(shí)查看項(xiàng)目會(huì)發(fā)現(xiàn)多出了一個(gè)文件夾 bower_components/，里面還有一個(gè) jquery 文件夾寂汇，它是 jquery 包的所有相關(guān)的依賴
5. 接下來安裝一個(gè) d3 庫病往，安裝后會(huì)發(fā)現(xiàn) bower_components/ 文件夾中多出了 d3 文件夾，這個(gè)是 d3 包所有的依賴
bower install d3
5. 如果當(dāng)前你想查看項(xiàng)目中都裝了那些庫和其中的依賴關(guān)系骄瓣，就可以使用下面的命令查看
bower list
結(jié)果如下
6. 再裝一個(gè) bootstrap
bower install bootstrap
顯示如下圖停巷，安裝成功，如果是長時(shí)間都沒反應(yīng)可以按 `ctrl+c` 榕栏，再重新執(zhí)行安裝命令
>
> 最后一行的意思是 bootstrap 這個(gè)庫依賴于 jquery#3.2.1
7. 再次查看項(xiàng)目中都裝了那些庫和其中的依賴關(guān)系
bower list
顯示結(jié)果如下畔勤，
>
> 你會(huì)發(fā)現(xiàn)整個(gè)的依賴關(guān)系是上圖顯示的這樣的
8. 將 jquery 包刪掉，執(zhí)行后會(huì)彈出一個(gè)是否繼續(xù) Y/n 的提示 輸入 y 再回車即可
bower uninstall jquery
y
9. 此時(shí)再次查看項(xiàng)目中都裝了那些庫和其中的依賴關(guān)系
bower list
顯示如下
> 上圖所示的便是報(bào)錯(cuò)了 因?yàn)?bootstrap 相關(guān)的依賴 jquery 沒有安裝
10. 我們此時(shí)再裝一個(gè)低版本的 jquery
bower install jquery#1.7.2
安裝時(shí)會(huì)彈窗一個(gè)提示讓你選擇安裝這個(gè) 1.7.2 版本的還是最新的扒磁，我們輸入 1 就可以了
11. 低版本的 jquery 安裝成功之后庆揪，我們?cè)賵?zhí)行查看命令
bower list
這個(gè)時(shí)候就會(huì)有下面的顯示，標(biāo)記的那行說的是妨托，當(dāng)前的版本是不相容的缸榛，必須得是 1.9.1 以上的版本
12. 對(duì)項(xiàng)目中的依賴進(jìn)行更新
下面這個(gè)命令是對(duì)項(xiàng)目中所有的依賴全部進(jìn)行更新
bower update
命令行中顯示如下，在對(duì)話框中輸入上面的選項(xiàng)中是最新版的 2 即可
如果只是更新 jquery 的話就執(zhí)行下面的命令
bower update jquery
13. 再執(zhí)行查看命令兰伤，會(huì)發(fā)現(xiàn)之前的報(bào)錯(cuò)全都沒有了
bower list
14. 查看當(dāng)前項(xiàng)目中的緩存文件列表
bower cache list
這里講庫名和相應(yīng)的資源 gitURL 全部輸出了
15. 查看項(xiàng)目中的某個(gè)庫内颗，這里以 d3 為示例
bower info d3
這里他將 d3 在 github 上的所有版本號(hào)全都給輸出了，上面是一些不需要我們輸入的一些基本的信息敦腔，最后一行是說 我們可以以 `d3#4.9.1` 這種方式查看某個(gè)特定的版本
16. 如果我們想查看 d3 庫的項(xiàng)目 gitURL 均澳，可以用下面命令
bower lookup d3
這樣就將上面的 homepage 給輸出了
17. 還可以用下面的命令查看包含 d3 庫的 gitURL 有多少
bower search d3
下面輸出的就是所有的查詢結(jié)果
