★★ 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" が作成される。