BowerでWebアプリのJavascriptやCSSライブラリをスマートに管理する

Bower

Bower A package manager for the web By Twitter

これは何?

Twitter社が提供しているフロントエンドのJavaScriptCSSライブラリをインストール・管理するためのツールです。

コマンドもしくは定義ファイルに基づいて、ライブラリをインストールする事ができます。

node.jsのnpmやRubyのgemのようなものですが、npmが主にnode.jsやサーバサイドで使用するライブラリを管理するのに対して、bowerはjQueryTwitter Bootstrapのようなフロントエンドアプリで使うjavascriptcssライブラリを管理します。

インストール

npmでグローバル(-g)にインストールします。

$ npm install -g bower

使い方

インストール

bowerは、component.jsonに書かれたライブラリをインストールしてくれます。したがってまずはcomponent.jsonを作成します。

component.jsonの作成

  1. bowerにinitオプションを付けて実行します。

     $ bower init
    
  2. ウィザードが始まるので、アプリ名やバージョンを入力します。

  3. ウィザードが終了するとcomponent.jsonが出力されるので、開いてdependenciesに使いたいライブラリを記述します。

     $ vim component.json
    
     {
       "name": "myapp",
       "version": "0.0.1",
       "ignore": [
         "**/.*",
         "node_modules",
         "components"
       ],
       "dependencies": {
         "jquery": "latest"
       }
     }
    

    ※bowerリポジトリにないライブラリをgithubからダウンロードするような設定も可能です。

ライブラリのインストール

component.jsonができたので次はライブラリのインストールです。

  1. 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

おすすめの使い方

  1. bower initのウィザードでcomponent.jsonを作成

  2. bower search ライブラリ名 でライブラリを探す

  3. 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でインストールしたライブラリのJavaScriptCSSファイルパスの一覧表示

    アプリから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"
      }