はじめに

Bowerとは、Twitter社謹製のフロントエンド用のパッケージ管理ツールです。Bowerを利用すると、JavascriptやCSSのライブラリをコマンド一つでインストールすることができます。

Bowerのインストール

BowerはNode.jsで実装されており、Node.jsのパッケージ管理ツールであるnpmを利用してインストールすることができます。Node.jsおよびnpmのインストールに関しては、ここでは割愛いたします。

$ npm install -g bower

Bowerの利用

Bowerの初期化

まず、Bowerを利用したいプロジェクトのディレクトリでbower initコマンドを実行し、そのプロジェクトでBowerを利用するための初期化を行います。

$ cd /path/to/project
$ bower init

プロンプト上で、いくつか設定情報の入力を求められますが、後から変更も可能ですので、不明であればすべてEnterで大丈夫です。完了後、フォルダ内に、bower.jsonという設定ファイルが作成されていることを確認できると思います。

パッケージのインストール

準備が整ったので、パッケージのインストールに進みます。ここでは、例としてjQueryをインストールします。パッケージをインストールするにはbower installコマンドを実行します。

$ bower install jquery --save

コマンド実行後、bower_componentsというディレクトリが作成され、その中にjqueryディレクトリが作られていることが確認できると思います。ここで、–saveオプションを指定するこで、dependenciesとしてjqueryがbower.jsonに登録されます。bower.jsonに登録されたパッケージは、追加引数なしのbower installコマンドを実行することで、一気にインストールすることが可能なため、仮にbower_componentsディレクトリが失われても、プロジェクトに必要なパッケージをいつでも綺麗に揃えることができます。

$ bower install

ちなみに、テストのみに利用するJavascriptライブラリは、最終的な成果物に含める必要がありません。そのような場合は、–saveの代わりに–save-devを指定します。

bower_componentsディレクトリの場所を変更

bower_componentsディレクトリの場所は標準でプロジェクトの直下になります。ブラウザからアクセスができるpublicディレクトリの下などに変更したい場合は、プロジェクトの直下に.bowerrcというファイルを作成し、JSON形式でdirectoryキーに対してパスを指定します。

{
  "directory": "public/bower_components"
}