[Javascript] bower javascript套件管理工具 初探

現在Github上面的web專案幾乎都會用bower來管理package的相依性，
這麼好的工具一直都沒來用一下也該打屁股了XD

https://github.com/bower/bower
http://bower.io/

bower是twitter團隊開發的web套件的管理工具，
有了bower你就不用在去擔心當網站使用的第三方package要升級時，
還要去相關網站下載XD

查詢bower現在的套件

http://bower.io/search/

安裝NPM

由於bower採用npm安裝，請先安裝npm

sudo apt-get install npm

安裝bower

透過node.js的npm工具就可以直接安裝了

npm install bower -g

如何測試

請先建一個測試目錄

mkdir bower_demo

cd bower_demo

指令集

查詢指令集

bower -help

安裝套件

bower install <package-name>

bower install jquery

bower jquery#*                  cached git://github.com/jquery/jquery.git#2.1.1

bower jquery#*                validate 2.1.1 against git://github.com/jquery/jquery.git#*

bower jquery#~2.1.1            install jquery#2.1.1

jquery#2.1.1 bower_components/jquery

預設會將套件安裝至專案目錄下的bower_components

安裝指定版本的套件

bower install <package-name>#<version>

bower install jquery#1.9

套件的名稱可以為以下的方式

安裝指定版本的套件，並更名

bower install <name>=<package-name>#<version>

bower install jquery-rename=jquery#1.8

bower jquery-rename#1.8     not-cached git://github.com/jquery/jquery.git#1.8

bower jquery-rename#1.8        resolve git://github.com/jquery/jquery.git#1.8

bower jquery-rename#1.8       download https://github.com/jquery/jquery/archive/1.8.3+1.tar.gz

bower jquery-rename#1.8        extract archive.tar.gz

bower jquery-rename#1.8     deprecated Package jquery-rename is using the deprecated component.json

bower jquery-rename#1.8       resolved git://github.com/jquery/jquery.git#1.8.3+1

bower jquery-rename#1.8        install jquery-rename#1.8.3+1

jquery-rename#1.8.3+1 bower_components/jquery-rename

如何使用你安裝的套件

你可以在你的專案下引用下載下來的套件

查詢目前安裝的套件

bower list

會列出以下訊息告訴你目前套件的資料與最新的版本

bower check-new     Checking for new versions of the project dependencies..

bower_demo /Library/WebServer/Documents/bower_demo

├── jquery#1.9.1 extraneous (latest is 2.1.1)

└── jquery-rename#1.8.3+1 extraneous (latest is 2.1.1)

更新套件

bower update <package-name>

bower update jquery-rename 

bower jquery-rename#1.8         cached git://github.com/jquery/jquery.git#1.8.3+1

bower jquery-rename#1.8       validate 1.8.3+1 against git://github.com/jquery/jquery.git#1.8

移除套件

bower uninstall <package-name>

bower uninstall jquery

搜尋套件

bower search <package-name>

bower search bootstrap

會列出一堆結果

Search results:

    bootstrap git://github.com/twbs/bootstrap.git

    angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git

    sass-bootstrap git://github.com/jlong/sass-bootstrap.git

    bootstrap-sass git://github.com/jlong/sass-twitter-bootstrap

    bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git

    bootstrap-select git://github.com/silviomoreto/bootstrap-select.git

    bootstrap-timepicker git://github.com/jdewit/bootstrap-timepicker

    angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git

    angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower

    bootstrap-sass-official git://github.com/twbs/bootstrap-sass.git

    bootstrap-daterangepicker git://github.com/dangrossman/bootstrap-daterangepicker.git

    bootstrap.css git://github.com/bowerjs/bootstrap.git

    bootstrap-css git://github.com/jozefizso/bower-bootstrap-css.git

    bootstrap-datetimepicker git://github.com/tarruda/bootstrap-datetimepicker.git

    bootstrap-switch git://github.com/nostalgiaz/bootstrap-switch.git

    bootstrap-modal git://github.com/jschr/bootstrap-modal.git

客製化套件安裝目錄

如果你想要自訂套件的安裝目錄的話，請在專案目錄下新增一個.bowerrc檔案，
之後安裝套件就會變更至你設定的目錄了

{ "directory" : "assets/lib" }

定義套件Package

可以為你的專案建立一個bower.json來描述專案內套件相關資訊，

也可以在專案目錄下透過bower init 指令來一步一步建立相關的套件包資訊

相關的參數解說如下：

The bower.json defines several options:

• name (required): The name of your package.
• version: A semantic version number (see semver).
• main [string|array]: The primary endpoints of your package.
• ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.
• dependencies [hash]: Packages your package depends upon in production. Note that you can specify ranges of versions for your dependencies.
• devDependencies [hash]: Development dependencies.
• private [boolean]: Set to true if you want to keep the package private and do not want to register the package in future.

同事建立Angular Seed的範例

{
 "name": "Fangular",
 "description": "An angular spaghetti seed",
 "homepage": "https://github.com/Festum/Fangular",
 "license": "MIT",
 "version": "0.0.2",
 "private": false,
 "main":[
  "app"
 ],
 "ignore": [
  ".git",
  ".gitignore",
  ".jshintignore",
  ".jshintrc",
  ".travis.yml",
  "bower.json",
  "package.json",
  "README.md"
 ],
 "dependencies": {
  "angular": "^1.2",
  "angular-route": "^1.2",
  "angular-animate": "^1.2",
  "angular-loader": "^1.2",
  "angular-mocks": "^1.2",
  "angular-resource": "^1.2",
  "angular-translate": "^2",
  "angular-bootstrap": "^0.10.0",
  "angular-ui-utils": "~0.1",
  "angular-ui-router": "~0.2",
  "bootstrap": "^3"
 },
 "devDependencies": {
  "angular-cookies": "^1.2",
  "angular-sanitize": "^1.2",
  "angular-scenario": "^1.2",
  "angular-touch": "^1.2"
 }
}

PS: devDependencies: 為開發版本時所需用到的套件，像是test-framework等..

發佈你的套件 Package

如果你覺得你的套件想要分享給全世界的開發者的話，你可以透過註冊指令發佈你的套件。
並要follow下面的規則：

• There must be a valid manifest JSON in the current working directory.
• Your package should use semver Git tags. (語意化版本)
• Your package must be available at a Git endpoint (e.g., GitHub); remember to push your Git tags!

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

另外也可以跟CI整合，目前還沒用到這個CASE所以就不試了:D