前端包管理Bower入門教程

Bower瞭解

bower是twitter的一個開源項目，使用nodejs開發，用於web包管理。若是愈來愈多得開源項目都託管在github上，bower只須要將github上項目加上一個配置文件既可使用bower方式使用安裝包。做爲包管理，bower能提供添加新web包，更新web包，刪除web包，發佈web包功能，管理包依賴。web包一般認爲由html+css+javascript構成。

環境依賴

bower是依賴於 Node.js的，因此安裝以前須要Node環境，Node.js官網

安裝最新版本，而後命令行中嚴重是否安裝成功

node -v  //版本號查詢  個人是v10.16.0

安裝Bower

bower官網

優勢：項目依賴安裝，能夠固定資源文件，支持資源版本升級，能夠支持緩存安裝等
全局安裝bower

npm install -g bower  //若是你以爲npm安裝較慢，能夠用淘寶鏡像cnpm安裝

安裝完成後，查詢版本號

bower -v  //若是出現對應的版本號說明安裝成功

Bower 使用

建立文件夾（以個人爲例，建立了一個空文件夾bowerDemo），而後命令行到該空文件下

cd bowerDemo

初始化bower

bower init

會提示你輸入一些基本信息，根據提示按回車或者空格便可，而後會生成一個bower.json文件，用來保存該項目的配置

插件安裝

接下來你就能夠安裝插件了，好比安裝下載jquery,在根目錄先輸入下面命令安裝

bower install jquery --save

安裝成功後你就會在跟文件夾裏看到一個bower_components文件夾，這也是插件默認的文件夾

你也能夠輸入命令查詢包的信息，輸入命令後會出現包的因此版本，而後你就能夠更新安裝不一樣的版本

bower info jquery  //包的信息
bower update   //包的更新
bower uninstall jquery  //包的卸載

這就是一個簡單的bower的安裝以及插件包的下載

固然，這些僅僅是不夠的，做爲一個前端開發，有時候會寫不少html，css，js頁面，甚至每次建立新的項目，都要用一樣的模板，因此這個時候，就用到bower的註冊功能，把本身的包或者插件發佈到bower平臺，並下載使用。

bower平臺發佈插件並下載

首先打標籤（假設你已經把項目模板發佈到github上面），在你的本地倉庫根目錄下運行下面命令

// -a是添加 標籤名，通常寫版本號, -m爲標籤添加註釋信息
git tag -a 1.0.0 -m 「version info″

// –tags參數表示提交全部tag至服務器端，普通的git push origin master操做不會推送標籤到服務器端
git push origin --tags

一切準備就緒後，開始註冊插件

bower register projectName  項目的github地址   
eg：bower register fontend https://github.com/mengnn/fontendGet.git

這樣，你的插件就註冊成功了，你就能夠在你的項目根目錄下下載你的插件（模板），也就不用每次重複的copy

bower install  fontend --save-dev  //fontend是我註冊的插件名稱

運行成功，你就能夠看到你的模板下載到你的項目文件夾下面，just so so！

此時你的bower.json文件裏面也會相對應的出來你安裝的插件配置信息（版本號，名稱）

ok，到這裏就結束了，雖然如今bower已經中止維護了，可是這門技術仍是存在的，固然對於「玩家」來講，實在有趣！