railsプロジェクトでjavascriptのパッケージ管理ツールBowerを使う

railsのプロジェクトでjavascriptのパッケージ管理をやってみようと思いまして、調べてみた。

javascriptのパッケージ管理ツールは

• bower
• component
• jam
• volo
  という感じで、いくつかあります。今回はTwitter社が開発しているBowerを利用しようと思います。

Bowerについて

BowerはJavascriptのほか、CSSや画像などassetsファイルのパッケージ管理ツールです。

Bowerはほかのツールと異なり、buildやscaffoldingなどの機能はありません。
自作したcomponentsをBower componentsに登録できます。
あと、Bower componentsのみならずgithubやnpm、プライベートなrepositoryからもパッケージを取得できます。

Bowerを触ってみる

インストール(nodeとnpmはすでにインストール済み)
[shell]

とりあえずグローバルインストールしとく

npm install bower -g
[/shell]

initialize
[shell]
$ bower init
name: [blog]
version: [0.0.0]
main file: []
add commonly ignored files to ignore list? (y/n): [y] y
[/shell]

これでpackage管理のファイルとなるcomponent.jsonが生成します。
npmでいうことろのpackage.jsonかな。

とりあえずパッケージのインストール
[shell]

$ bower <command> <options>

help

$ bower help

install

$ bower install jquery
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.1
bower copying /Users/hoge/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.9.1

component.json に追記される

$ bower install jquery –save
[/shell]

インストールすると、/Users/hoge/.bower (~/.bower)にパッケージがキャッシュされるぽい。–saveオプションを付けるとcomponents.jsonに追記される。

components.jsonはこんな感じになってる
[javascript]
{ "name": "project",
"version": "0.0.1",
"ignore": [
"**/.txt",
"node_modules",
"components"
],
"dependencies": {
"jquery": "~1.9.1"
}
} [/javascript]

そのほかのコマンドに関して

[shell]

update

$ bower update jquery

uninstall

$ bower uninstall jquery
bower uninstalling /Users/hoge/jquery

インストールされているリスト

$ bower list

または

$ bower list

Bower componentsを検索

$ bower search jquery

• jquery git://github.com/components/jquery.git
• jquery-ui git://github.com/components/jqueryui
• jquery.cookie git://github.com/carhartl/jquery-cookie.git
• jquery-waypoints git://github.com/imakewebthings/jquery-waypoints.git
  …

package url を検索

$ bower lookup jquery
jquery git://github.com/components/jquery.git

バージョン情報

$ bower info jquery
jquery

Versions:
- 1.9.1
- 1.9.0
- 1.8.3
- 1.8.2
- 1.8.1
- 1.8.0
- 1.7.2
- 1.7.1
- 1.7.0
- 1.6.4
- 1.6.3
- 1.6.2
- 1.6.1
- 1.6.0
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.6
- 1.2.3

.bowerのキャッシュをクリア

$ bower cache-clean jquery
bower completion cleared completion cache
bower cache cleared jquery

パッケージの登録

$ bower register <name> <url>

bowerコマンドの補完

$ bower completion >> ~/.bashrc (or ~/.zshrc)
$ cat ~/.bashrc

Credits to npm’s. Awesome completion utility.

#

Bower completion script, based on npm completion script.

###-begin-bower-completion-###
#

Installation: bower completion >> ~/.bashrc (or ~/.zshrc)

Or, maybe: bower completion > /usr/local/etc/bash_completion.d/npm

#

COMP_WORDBREAKS=${COMP_WORDBREAKS/=/}
COMP_WORDBREAKS=${COMP_WORDBREAKS/@/}
export COMP_WORDBREAKS

if type complete &>/dev/null; then
_bower_completion () {
local si="$IFS"
IFS=$’\n’ COMPREPLY=($(COMP_CWORD="$COMP_CWORD"
COMP_LINE="$COMP_LINE"
COMP_POINT="$COMP_POINT"
bower completion – "${COMP_WORDS[@]}"
2>/dev/null)) || return $?
IFS="$si"
}
complete -F _bower_completion bower
elif type compdef &>/dev/null; then
_bower_completion() {
si=$IFS
compadd – $(COMP_CWORD=$((CURRENT-1))
COMP_LINE=$BUFFER
COMP_POINT=0
bower completion – "${words[@]}"
2>/dev/null)
IFS=$si
}
compdef _bower_completion bower
elif type compctl &>/dev/null; then
_bower_completion () {
local cword line point words si
read -Ac words
read -cn cword
let cword-=1
read -l line
read -ln point
si="$IFS"
IFS=$’\n’ reply=($(COMP_CWORD="$cword"
COMP_LINE="$line"
COMP_POINT="$point"
bower completion – "${words[@]}"
2>/dev/null)) || return $?
IFS="$si"
}
compctl -K _bower_completion bower
fi

###-end-bower-completion-###

リンク

テストしたいプロジェクトを登録

$ bower link (packege)
bower link /Users/hoge/.bower/links/project > /Users/hoge/project

登録したプロジェクトを別のプロジェクトで利用

$ bower link project
bower link /Users/other_project > /Users/hoge/.bower/links/project
[/shell]

リンクは現在のプロジェクトを/Users/hoge/.bower (~/.bower)にキャッシュして、ほかのプロジェクトでも利用できるする機能っぽい。
自身で開発しているパッケージのテストするときに活用できる。

また、各プロジェクトのディレクトリに.bowerrcを置くことで設定が個別に設定ができる。

[javascript]
{ "directory" : "path/to/install/dir",
"json" : "component.json",
"endpoint" : "https://bower.herokuapp.com"
} [/javascript]

という感じで使えそう。

Railsプロジェクに追加

Railsプロジェクトで使用してみる。

Rials.rootに.bwoerrcを追加
[shell]
$ touch .bwoerrc
[/shell]

.bwoerrcを編集
[javascript]
{ "directory" : "vendor/assets/components",
"json" : "component.json",
"endpoint" : "https://bower.herokuapp.com"
} [/javascript]

component.jsonの生成
[shell]
$ bower init

あとはウィザードに従って。

[/shell]

component.jsonにパッケージを追加
[javascript]
{ "name": "myapp",
"version": "0.0.1",
"ignore": [
"*/.",
"node_modules",
"components"
],
"dependencies": {
"jquery": "http://code.jquery.com/jquery-1.8.1.js",
"string.js": "https://github.com/jprichardson/string.js.git"
}
} [/javascript]

パッケージのインストール
[shell]
$ bower install
[/shell]

Bowerのインストールディレクトリ(vendor/assets/components)をAssetsパスに通す
[ruby]

application.rb

config.assets.paths << Rails.root.join(‘vendor’, ‘assets’, ‘components’)
[/ruby]

あとはapplication.jsにパッケージを追加
[javascript]
//= require jquery/jquery-min
//= require string.js/lib/string.min.js
[/javascript]

という感じで良さそう。
後で気がついたけど、gemでbower-railsとかもありますね。

Bowerはあくまでパッケージ管理ツールなので、ほかのタスク実行ツールgruntとかと使っていくといい気がする。
BowerとgruntだとYeomanでよかったのかな。

参考にしたサイト
frontend-packagers