Bowerまとめ（概要・導入・コマンド一覧）


★★ `bower list --paths` でソースマッピングが確認できる。変更するにはどうすればいい？

本家サイト：[Bower - A package manager for the web](http://bower.io/)

BowerはJavaScript,CSS,HTMLなどを依存関係を含めて管理してくれる、フロントエンド用パッケージ管理ツール。Twitter製

各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組み。プロジェクトディレクトリ内にbower.json があれば、そのプロジェクトはBower対応しているはず（Githubで今人気のライブラリを見てみると、ほぼ"bower.json"がある）。

環境構築時にプロジェクトに設定ファイル"bower.json"を置けば、それに記述されたパッケージ（依存パッケージ含む）を1コマンドで自動一括インストールすることもできる。

[Yeoman](http://yeoman.io)（ひな形作成ツール）を構成するツールのひとつでもある。

この記事では、公開目的のBower対応パッケージを作って公開する方法には触れていない。
良さ気な記事 → [bowerにパッケージを公開する方法](http://qiita.com/Quramy/items/a9417d8c58feacafff3e)



## Bower自身のインストール

node.js, npm がインストール([インストール手順](http://qiita.com/oreo3@github/items/622fd6a09d5c1593fee4))されていることが前提。
コマンド操作するのでグローバルにインストール

インストール（グローバル）
`npm install -g bower`




## 使ってみる

"bower_test"ディレクトリが、プロジェクトのルートということで進める。
以下ターミナルでの操作。

### 初期化

bower_testディレクトリ にいる状態で初期化コマンド `bower init`

質問（詳細はこのページ下の「初期化時の質問」を参照）に答えていくことで、設定ファイル"bower.json"を自動作成してくれる。


### パッケージをインストールしてみる

今回は、Modernizr,jQuery,normalize.cssをインストールしてみる

`bower install modernizr jQuery normalize.css --save`

結果

* bower_test/bower_componentsディレクトリの中に各パッケージが依存パッケージも含めてインストールされた
* --save オプションを付けているので、設定ファイル bower.json の dependencies(依存）に追記された


### bower.json で、新プロジェクトに一括インストール

設定ファイル"bower.json"があれば、その記述にある全パッケージ(依存含む)をコマンドひとつで復元可能。
つまり、新プロジェクト開始時や配布時に超便利。

#### 理解のためのサンプル操作
1. 新しいプロジェクトのディレクトリ "bower_test2" を新規作成
2. 上記「パッケージをインストールしてみる」の項で作った bower_test 内の bower.json を bower_test2 にコピー
3. ターミナルで bower_test2 に移動し `bower install`
4. bower.jsonに記述されたパッケージが依存パッケージも含めて一括インストールされた


## コマンド

同じパッケージ（バージョン違いも）をインストールすると上書き（置き換え）になる

### パッケージのインストール/アンインストール

`bower install パッケージ名` 最新バージョンをインストール
`bower install パッケージ名#バージョン` 特定バージョンのインストール
`bower install http://code.jquery.com/jquery-1.10.1.js` Bowerに未登録のパッケージ
`bower install パッケージ名1 パッケージ名2` 複数を同時にインストール
`bower install パッケージ名 --save` インストール & bower.jsonに依存関係(dependencies)を記述
`bower install パッケージ名 --save-dev` 開発中にしか使わないモジュールの場合はこれ

`bower uninstall パッケージ名` アンインストール
`bower uninstall パッケージ名 --save` アンインストール & bower.jsonのリストから削除
`bower uninstall パッケージ名 --save-dev` 開発中にしか使わないモジュールの場合

### パッケージのアップデート、指定バージョンに置き換え

`bower update` インストールされたパッケージをまとめてアップデート
`bower install パッケージ名#バージョン` 特定バージョンを新たにインストールで上書き
`bower install 名前=パッケージ名#バージョン` 名前を付けて特定バージョンを新たにインストール

### bower.json を参照し、一括インストール

`bower install` bower.jsonに記述したパッケージ(依存パッケージも再帰的に含む)をインストール
`bower install --production` 開発用(--save-dev オプションを付けたの)を除いてインストール

### その他

`bower search` Bower登録された全パッケージ一覧を表示
`bower search [検索キーワード]` キーワードでパッケージ検索
`bower list` インストールされたパッケージの一覧を表示。新バージョン出てたらそれも表示
`npm update -g bower` bower自身のアップデート（新Ver出てたら、上の bower list で促される）
`bower info パッケージ名` バージョンや情報を確認
`bower -v` Bower自身のバージョン確認


## 関連ツール

* [gulp-bower-files](https://www.npmjs.org/package/gulp-bower-files/) bower.jsonに記述のmainだけ抜き出すことができる(mainのオーバーライドも可)。gulpやgruntなどの自動化ツールで活用できる
* [CodeKit](https://incident57.com/codekit/) Bowerもサポート。GUIで操作


## インストール先ディレクトリの変更（必要なら）

.bowerrc（不可視ファイル、無ければ新規作成）に以下を記述
`{"directory": "インストール先ディレクトリのパス"}` 例：public/bower_components


## 初期化時の質問

矢印はテスト用入れた答え。適宜変更すること

`[?] May bower anonymously report usage statistics to improve the tool over time? (Y/n) `
意訳）Bower改善のため、匿名でユーザーの使用統計を繰り返し取得しますけどいいですか？→ Y（初回のみ聞かれる）

`[?] name: (bower_test) ` プロジェクト名 → Test Project
`[?] version: ` バージョン → 0.0.1
`[?] description: ` 説明 → このプロジェクトの説明
`[?] main file: ` メインファイル → index.html

```
[?] what types of modules does this package expose? (Press <space> to select)
❯⬡ amd
 ⬡ es6
 ⬡ globals
 ⬡ node
 ⬡ yui
```
このパッケージは、どんなモジュールにさらされますか？ → チェック付けずEnter
（AMDはJSのコードをモジュールとして定義し非同期ないし遅延ロードするための仕組み、ES6はECMAScript6、globalsはわからん、yuiはYahoo!のUIライブラリ）

`[?] keywords: ` キーワード → キーワード1,キーワード2
`[?] authors: (ユーザー名 <Eメール>) ` 著作者 → そのままEnter
`[?] license: (MIT) ` ライセンス → そのままEnter
`[?] homepage:` 解説ページ？ → http://解説ページURL

```
[?] set currently installed components as dependencies? (Y/n) 
```

現状インストールされているコンポーネントの依存ファイルもセットしますか？ → Y

`[?] add commonly ignored files to ignore list? (Y/n) ` 通常無視するファイルを無視リストに追加しますか？ → Y

```
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)
```
このパッケージを誤ってレジストリに発行されるのを妨げるプライベートとしてマークしますか？ → Y

設定コードが表示され、
`[?] Looks good? (Y/n) ` これでええの？ → Y

Yesで、bower_testディレクトリに "bower.json" が作成される。


## 参考記事

* [Bower入門(基礎編) - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)
* [bowerでクライアントのライブラリを管理 - Developers.IO](http://dev.classmethod.jp/server-side/bower/)
* [Bower入門(応用編) - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537)
* [grunt + bower で一気に環境構築 - デブ ハゲ](http://dev.hageee.net/22)
* [パッケージマネージャー「Bower」が大変便利で捗りそうです – Mach3.laBlog](http://blog.mach3.jp/2013/01/29/bower.html)