★★ bower list --paths でソースマッピングが確認できる。変更するにはどうすればいい?
本家サイト:Bower - A package manager for the web
BowerはJavaScript,CSS,HTMLなどを依存関係を含めて管理してくれる、フロントエンド用パッケージ管理ツール。Twitter製
各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組み。プロジェクトディレクトリ内にbower.json があれば、そのプロジェクトはBower対応しているはず(Githubで今人気のライブラリを見てみると、ほぼ"bower.json"がある)。
環境構築時にプロジェクトに設定ファイル"bower.json"を置けば、それに記述されたパッケージ(依存パッケージ含む)を1コマンドで自動一括インストールすることもできる。
Yeoman(ひな形作成ツール)を構成するツールのひとつでもある。
この記事では、公開目的のBower対応パッケージを作って公開する方法には触れていない。
良さ気な記事 → bowerにパッケージを公開する方法
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.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 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 bower.jsonに記述のmainだけ抜き出すことができる(mainのオーバーライドも可)。gulpやgruntなどの自動化ツールで活用できる
- 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" が作成される。