BowerでWebアプリのJavascriptやCSSライブラリをスマートに管理する
Bower
Bower A package manager for the web By Twitter
これは何?
Twitter社が提供しているフロントエンドのJavaScriptやCSSライブラリをインストール・管理するためのツールです。
コマンドもしくは定義ファイルに基づいて、ライブラリをインストールする事ができます。
node.jsのnpmやRubyのgemのようなものですが、npmが主にnode.jsやサーバサイドで使用するライブラリを管理するのに対して、bowerはjQueryやTwitter Bootstrapのようなフロントエンドアプリで使うjavascriptやcssライブラリを管理します。
インストール
npmでグローバル(-g)にインストールします。
$ npm install -g bower
使い方
インストール
bowerは、component.jsonに書かれたライブラリをインストールしてくれます。したがってまずはcomponent.jsonを作成します。
component.jsonの作成
bowerにinitオプションを付けて実行します。
$ bower init
ウィザードが始まるので、アプリ名やバージョンを入力します。
ウィザードが終了するとcomponent.jsonが出力されるので、開いてdependenciesに使いたいライブラリを記述します。
$ vim component.json { "name": "myapp", "version": "0.0.1", "ignore": [ "**/.*", "node_modules", "components" ], "dependencies": { "jquery": "latest" } }
※bowerリポジトリにないライブラリをgithubからダウンロードするような設定も可能です。
ライブラリのインストール
component.jsonができたので次はライブラリのインストールです。
component.jsonの記述に従ってライブラリをインストールします。
$ bower install
コマンドラインからcomponent.jsonにライブラリを追加
--saveオプションを付けるとコマンドラインでインストールすると同時にcomponent.jsonにインストールしたライブラリを追記する事ができます。
$ bower install --save jquery
bower searchでライブラリを探して、component.jsonに追記してbower installしていたところがそのままインストールするケースが多いと思いますが、後ろ2つの作業をまとめられるのでさらに楽になります。
ライブラリのアップデート
updateオプションで一括でアップデートできます。常に最新版を使用したいライブラリについては、compontent.jsonの中のバージョンを"latest"などとしておき、updateオプションで最新化するといいでしょう。
$ bower update
おすすめの使い方
bower init
のウィザードでcomponent.jsonを作成bower search ライブラリ名
でライブラリを探すbower install ライブラリ名 --save
でインストール & component.jsonにパッケージを追加
その他
bowerでインストールしたライブラリの一覧表示
$ bower list
依存関係を解決してダウンロードしてくれているのがわかります。
bower discover Please wait while newer package versions are being discovered 略 ├─┬ bootstrap#2.3.1 │ └── jquery#1.8.3 (2.0.0 now available) └── underscore#1.4.4
bowerでインストールしたライブラリのJavaScriptやCSSファイルパスの一覧表示
アプリからJavaScriptファイルやcssファイルをロードする際にパスがわかると便利です。bower listに--pathオプションを付ける事でファイルのパスが表示されます。
$ bower list --path
パスが一覧表示されます。ただしパス表示に対応していないライブラリもあるようです。
{ "bootstrap": [ "components/bootstrap/docs/assets/js/bootstrap.js", "components/bootstrap/docs/assets/css/bootstrap.css" ], "jquery": "components/jquery/jquery.js", "underscore": "components/underscore" }