Bower とは

BOWER – THE BROWSER PACKAGE MANAGER html, css, and javascript

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

---

BowerはWeb開発向けのパッケージマネージャーです。画像・CSS・JavaScriptといったリソースを簡単にインストールする事ができ、依存関係を管理してくれます。

新しいプロジェクトをスタートする度に毎回jQuery等のリソースを複製して設置するのは面倒です。 そこでBowerを利用する事で、コマンドラインから簡単に最新のパッケージを、依存リソースと一緒にインストールする事ができます。

また、プロジェクトの設定ファイル（bower.json）を作成して依存リソースを記しておけば、 コマンド一発で全てダウンロード、あるいはアップデートする事ができます。 プロジェクトに必要なライブラリがチームメンバーにとって一目瞭然になるのもメリットですね。

見ての通り、Twitter開発陣プレゼンツのリソースです。 リリース当初小耳には挟んでいたのですが、実用するまでには至らず。実際使ってみたら大変便利でした。

インストール

まずは Bower をインストールします。必要に応じて、sudoなどしましょう。 （node.jsを先にインストールしておく必要があります）

$ npm install -g bower

Windowsユーザーの場合は、Gitがコマンドプロンプトから呼べないと上手く動作しないそうです。 公式にあるように、msysgitインストール時に “Run Git from the Windows Command Prompt”のチェックを入れるか、 あるいは Git CUIの環境でnode.jsへのパスを通しておけば使えます。

cf) 公式ドキュメント参照 (“Windows users”の項)

簡単な使い方

パッケージをインストールする

まずはコマンドラインからパッケージ単体をインストールしてみます。”install” コマンドでパッケージ名を指定します。

$ bower install jquery

すると、カレントディレクトリに「bower_components」ディレクトリが作成され、その中にパッケージがインストールされます。 こんなかんじに。

ProjectRoot/
└ bower_components/
    └ jquery/
         ├ jquery.js
         ├ jquery.min.js
         ├ component.json
         └ composer.json

デフォルトの名前が”components”から変更になっています – 2013/09/05

パッケージ名を連記する事で複数のパッケージを一度にインストールする事もできます。

$ bower install jquery modernizr mustache

バージョンを決め打ちしてインストールするにはシャープ記号で区切って指定することができます。

$ bower install jquery#1.8.2
$ bower install jquery#1.8.x
$ bower install jquery#1.8
...

パッケージをアップデートする

インストールしたパッケージは “update” コマンドでアップデートできます。

$ bower update

欲しいパッケージを探す

欲しいパッケージがBowerに登録されているかどうかは “search” コマンドで探すことができます。

$ bower search mustache

    - mustache git://github.com/janl/mustache.js
    - grunt-mustache git://github.com/jonschlinkert/grunt-mustache.git

欲しいパッケージが見つからないんだけど？

Bowerに登録されていないパッケージをインストールするにはいくつかの方法があります。 例えば、headjsをインストールしたい場合。

$ bower install https://github.com/headjs/headjs
$ bower install headjs/headjs
$ bower install https://raw.github.com/headjs/headjs/master/dist/head.js
$ bower install ../../the/path/to/head.js

それぞれ次の物を指定してインストールしています。2番目が楽でいいですね。

1. GitHubのリポジトリURL
2. GitHubのショートハンド
3. リソースの直接URL
4. リソースのローカルパス

“register” コマンドでパッケージを新規登録する事も出来ますが、特定の条件が必要になる為、ここでは詳しく触れないでおきます。

プロジェクトを作成する

プロジェクトの設定ファイル “bower.json” を作っておく事で、 必要なパッケージを一括してインストール・アップデートする事ができます。

プロジェクトのルートディレクトリに”bower.json”を作成し、次のような要領で入力します。

設定ファイル名が”component.json”から変更になっています – 2013/09/05

{
    "name" : "My Awersome Project",
    "version" : "1.0.0",
    "dependencies" : {
        "jquery" : "1.8",
        "modernizr" : null,
        "mustache" : null
    }
}

基本的に “dependencies” に必要なリソースを追加していく形になります。 見ての通り、キーにパッケージ名、値にバージョンを記載するオブジェクトリテラルになっており、 バージョンが “null” になっている場合は最新版をインストールします。

後は、引数なしで “install” コマンドを実行するだけで、依存リソースが一括してダウンロードされます。便利。

$ bower install

また、「見つからないパッケージ」をインストールするためには、バージョンの代わりに前述の例のようなURLあるいはパス等を入力します。

"dependencies" : {
    ...
    "headjs" : "headjs/headjs"
}

インストール先ディレクトリをカスタマイズする

Bowerは “.bowerrc” というファイルでカスタマイズする事ができます。

例えば、パッケージのインストール先を “bower_components” ディレクトリから他の場所に移したい場合、 プロジェクトルートに “.bowerrc” ファイルを作成して次のように入力しておきます。

{
        "directory" : "assets/vendors"
}

また、 “.bowerrc” を自分のホームディレクトリに置いておく事で、自分が作る全てのプロジェクトにカスタマイズを適用する事ができますが、 そのプロジェクトを誰かと共有する際に問題が生じそうなので、基本的にはプロジェクトに同梱しておいた方が良いと思います。

Nettuts+ のチュートリアル動画

A RequireJS, Backbone, and Bower Starter Template

Nettuts+ によるチュートリアル動画です。 Bowerの基本的な使い方に加えて、RequireJSとBackboneによるスタートアップについて解説しています。 参考に、是非。

まとめ

node.js が出てから、JSベースの便利ツールが沢山出て来ましたね。 有り難りつつも、しっかり楽をさせてもらいましょう。

2013/09/05

bowerバージョンアップによる設定ファイルとディレクトリ名の変更について記載