Railsでbowerを使ってJSのライブラリを管理する

rails javascript

最近Perlで仕事をしていて、cpanfileが無いプロジェクトで盛大にやらかしたtohaeです、こんにちは。
Perlでやらかした経験を生かし、Railsプロジェクトで使うクライアントサイドのJSもちゃんと管理しようとbowerを使うことにしました。

bower is 何？

bowerってのはtwitterが作ったJSのパッケージマネージャです。最近紹介記事も多いので、詳しくはぐぐってください。
簡単に言うとJSをwgetする時代は終わったってことです！！！
今回はbowerの紹介ではなく、bowerをRailsで使う場合にはbower-railsを使うといいかもというお話をします。

bower-railsの下準備

まずはbowerをnpmで入れます。

$ npm install bower -g

次にGemfileにbower-railsを追加します。現時点ではバージョンを指定しないとちょっと古いバージョンが入るので注意。

gem 'bower-rails', '0.3.1'

Railsでjqueryを使う場合はjquery_ujsを使うためにjquery-railsを使ってることが多いと思いますが、jqueryとjquery_ujsはbowerで管理するため、Gemfileからjquery-railsを消しておきます。

bower.jsonでなくJsfile

bowerはboewr.jsonに依存関係を定義しますが、bower-railsはGemfileのようにRubyで書きたい人のために独自のDSLが用意されています。
独自DSLを使う場合は、Jsfileというファイルを作成し、以下のように記述します

assets_path "assets/javascripts"

# Puts files under ./vendor/assets/javascripts
group :vendor do
  js 'jquery', '2.0.0'
  js 'jquery-ujs' # Assummes it's latests
  js 'jquery-autopager', 'http://lagoscript.org/files/jquery/autopager/jquery.autopager-1.0.0.js'
end

Gemfileみたいで親しみやすいですね！
このように記述して以下のコマンドを実行します。

$ rake bower:dsl:install

実行するとvendor/assets/javascripts以下にbower.jsonが作成され、それをもとにbower installがされてvendor/assets/javascripts/components以下にJSが入ります。

このままではassetsで使えないので、vendor/assets/javascripts/componentsをassets pathに追加しましょう。

# config/application.rb
config.assets.paths << Rails.root.join("vendor", "assets", "javascripts", "components")

最後にJSのrequireのパスを書き換えて完了です。今回のJsfileだと下記のような感じになります。

//= require jquery
//= require jquery-ujs/src/rails.js
//= require jquery-autopager/index.js

bowerで入るディレクトリ構成上、jquery-ujsとか若干ださい感じに…。jquery-railsはいつもどおり使った方がいいかもしれません。

cap deploy!!!!

capistranoでbundle installするような感じでbower installするとしたら、こんなタスクを書けば良さそうです。

namespace :bower do
  task :install do
    run "cd #{latest_release} && bundle exec rake bower:dsl:install"
  end

  task :update do
    run "cd #{latest_release} && bundle exec rake bower:dsl:update"
  end
end
after "deploy:finalize_update", "bower:install"

ちなみにbowerはGit Read-Onlyなgit://を使うのですが、環境によってはこのプロトコルが使えないことがあってハマりました…。そういう場合にはhttpsを使うようにgitconfigを修正すればいいようです。
参考： http://stackoverflow.com/questions/4891527/git-protocol-blocked-by-company-how-can-i-get-around-that/10729634#10729634

まとめ

こんな感じでRailsのJSをbower-railsを使ってJsfileで管理するようにしてみました。
Gemfileやpackage.jsonやcpanfileとかいろいろ便利な世の中になったなーと思いつつも、いろんな言語を触るとそれぞれ少しずつ違ってイラっしてたんですが、今回紹介したJsfileはRubyでGemfileのように記述できるのでおすすめです。