1. oreo3@github

    Posted

    oreo3@github
Changes in title
+Bowerまとめ(概要・導入・コマンド)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,138 @@
+
+本家サイト:[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)(ひな形作成ツール)を構成するツールのひとつでもある。
+
+
+
+## 導入
+
+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に記述された依存パッケージが一括インストールできた。
+
+
+## コマンド
+
+同じパッケージ(バージョン違いも)をインストールすると上書き(置き換え)になる
+
+#### パッケージのインストール/アンインストール
+
+`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.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自身のアップデート
+
+
+## 初期化時の質問
+
+矢印はテスト用入れた答え。適宜変更すること
+
+`[?] 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" が作成される。
+
+
+### インストール先ディレクトリの変更(必要なら)
+
+.bowerrc(不可視ファイル、無ければ新規作成)に以下を記述
+`{"directory": "インストール先ディレクトリのパス"}` 例:public/bower_components
+
+
+## 参考記事
+
+* [Bower入門(基礎編) - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)