1. oreo3@github

    No comment

    oreo3@github
Changes in body
Source | HTML | Preview
@@ -1,152 +1,157 @@
本家サイト:[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 がインストールされていることが前提
インストール(グローバル)
`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_test2" を新規作成。
bower_test内の bower.json を bower_test2 にコピー。
ターミナルで bower_test2 に移動し、
`bower install`
bower.jsonに記述された依存パッケージが一括インストールできた。
## コマンド
同じパッケージ(バージョン違いも)をインストールすると上書き(置き換え)になる
### パッケージのインストール/アンインストール
--save-dev オプションは試していない。間違ってたらごめんなさい。
`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` インストールされたパッケージの一覧を表示
`bower info パッケージ名` バージョンや情報を確認
`bower -v` Bower自身のバージョン確認
-`bower update` Bower自身のアップデート
## 関連ツール
* [gulp-bower-files](https://www.npmjs.org/package/gulp-bower-files/) Build gulp.src() of your bower packages main files.
## 初期化時の質問
矢印はテスト用入れた答え。適宜変更すること
`[?] May bower anonymously report usage statistics to improve the tool over time? (Y/n) `
-意訳)Bower改善のため、匿名でユーザーの使用統計を繰り返し取得しますけどいいですか?→ Y
+意訳)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" が作成される。
## インストール先ディレクトリの変更(必要なら)
.bowerrc(不可視ファイル、無ければ新規作成)に以下を記述
`{"directory": "インストール先ディレクトリのパス"}` 例:public/bower_components
## 参考記事
* [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)