[Web]Bower 前端套件管理工具

Bower 是一套由 Twitter 開發出來的前端管理工具，在一般開發環境如果要使用 jQuery 或 Bootstrap 之類的套件必須手動到官網下載，透過 Bower 可以自動安裝且管理這些套件

另外因為 Bower 是用 Node.js 開發的，而套件管理也是透過 Git，因此安裝前需要先安裝 Node.js、NPM、Git

安裝

npm install -g bower

安裝套件

# 套件安裝後會在當下的路徑新增一個 bower_components 資料夾

# 安裝已註冊的套件
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

相關指令

# 查詢指令用法
bower help

# 搜尋可安裝的套件
bower search jquery

# 查詢套件資訊
# bower info 指令會列出該套件 bower.json 的設定
bower info jquery
bower info jquery#<version>

透過 .bowerrc 修改 bower_components 名稱及路徑
.bowerrc 可以放在 /(根目錄) 或 ~(家目錄)，分別代表 Global 和自己的設定

{
    "directory" : "lib/js/plugin"
}

以上範例就是將套件安裝於該路徑底下的 lib/js/plugin
另外其他相關設定，包含權限、proxy等等可以參考 官網參數

自行建立 bower 套件
1. 首先需要先在你的套件中 init bower.json

bower init

2. 建立 Dependencies

# save 參數會將該版本號寫入 bower.json 的 dependencies
bower install <package> --save

init 完後會長出 json 格式的設定

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

3. 註冊套件到 Bower 官網(之後就可以透過 bower search 搜尋到)

bower register <my-package-name> <git-endpoint>

4. 設定 .bowerrc，可以指定components要安裝在哪個目錄

{
    "directory": "public/bower_components"
}