フロントエンド用パッケージ管理ツールのBowerの使い方とコマンド

f:id:tasukujp:20150329175918p:plain

Twitter社製のフロントエンド用パッケージ管理ツール Bower を使ってみました。必要なライブラリを簡単にインストールすることができます。

Bowerのインストール

次のコマンドを実行します。BowerをインストールするにはNPMが必要なので、まだの方は【Mac】nodebrewのインストールとコマンドなど使い方まとめを参照してインストールしてください。

$ npm install bower -g

インストールが完了したらバージョンを確認してみます。

$ bower -v
1.3.12

ちなみにインストール時の-gオプションについてはグローバルにインストールすることを示しています。NPMがインストールされている node_module ディレクトリですね。nodebrew を使ってる方は~/.nodebrew/current/lib/node_modules/になります。-gオプションを指定しない場合はローカルインストールされ、カレントディレクトリの node_module にインストールされます。

プロジェクトの初期化をする

使い方としてはプロジェクト単位でパッケージを管理するものみたいで、プロジェクトディレクトリ内にbower.jsonがあれば、記述されているパッケージをコマンドひとつでインストールすることが出来るようになります。Rubyのbundlerのようなイメージです。

まずは適当なディレクトリに移動してbower initを実行してください。質問にはとりあえず全てEnterを押しいきます。質問に関しては Bowerまとめ（概要・導入・コマンド一覧） - Qiita が詳しいです。

$ bower init
[?] May bower anonymously report usage statistics to improve the tool over time? Yes
? name: dev
? version: 0.0.1
? description: dev
? main file:
? what types of modules does this package expose?:
? keywords:
? authors: tasukujp <mail@address>
? license: MIT
? homepage:
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No
? Looks good?: Yes

完了するとbower.jsonが作成されているはずです。

{
  "name": "dev",
  "version": "0.0.1",
  "authors": [
    "tasukujp <example@mail.com>"
  ],
  "description": "dev",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

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

パッケージのインストールはbower install <package>です。

$ bower install jquery
bower jquery#*              not-cached git://github.com/jquery/jquery.git#*
bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.3.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.3
bower jquery#~2.1.3            install jquery#2.1.3

jquery#2.1.3 bower_components/jquery

カレントディレクトリにbower_componentsディレクトリが作成されて、その中にインストールされます。

$ ls bower_components/jquery/
MIT-LICENSE.txt bower.json  dist        src

しかし、これだとbower.jsonにパッケージが記述されませんので、インストールする時に--saveオプションを付けることでbower.jsonに追記されます。

$ bower install jquery --save
bower jquery#*                  cached git://github.com/jquery/jquery.git#2.1.3
bower jquery#*                validate 2.1.3 against git://github.com/jquery/jquery.git#*
bower jquery#~2.1.3            install jquery#2.1.3

jquery#2.1.3 bower_components/jquery
$ cat bower.json
{
  "name": "dev",
  "version": "0.0.1",
  "authors": [
    "tasukujp <example@mail.com>"
  ],
  "description": "dev",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.3"
  }
}

新しい環境やプロジェクトなどで bower.json に記述されたパッケージをインストールしたい場合はbower installを実行します。

パッケージのインストール先を指定する

インストール先を指定するには.bowerrcに以下の設定を追加してください。デフォルトではカレントディレクトリのbower_componentsにインストールされるようになっています。

{
  "directory": "app/bower_components"
}

spec/config.md at master · bower/spec · GitHub

その他のコマンド

バージョンを指定してインストールする

$ bower install <package>#<バージョン>

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

$ bower update

Bower自身のアップデート

$ npm update -g bower

アンインストールする

$ bower uninstall <package>

パッケージを検索する

$ bower search <packagae>

インストール済みのパッケージ一覧を確認する

$ bower list

パッケージを開発用としてインストールする

$ bower install <package> --save-dev

--save-devオプションを付けたパッケージを除いてインストール

$ bower install --production

参考記事

Bowerまとめ（概要・導入・コマンド一覧） - Qiita

Bower入門(基礎編) - from scratch

TASK NOTES