RailsでBower

RailsでBowerを利用して開発する方法と、Herokuで動作させる方法について説明する。

brew install npm

bowerを利用するにはnpmが必要になる。開発環境にMacを利用している場合、npmはhomebrewでインストールできる。余談だけど、普通にbrew installで開発者が各自手元にインストールすると「開発環境ではこういうツールを利用している」という情報が失われて困るだろうから、(今となってはもう非推奨になったが) Brewfileに記述するとか、Makefileやscript以下にそのプロジェクト用の環境構築のためのスクリプトを用意しておいた方が良い。

brew install npm

npm init

そのプロジェクトで初めてnpmを利用する場合、npm initを実行すると、package.jsonというファイルのひな形を生成してくれる。デフォルトで生成される奴は冗長な部分が多いので、適切に編集したほうが良いかもしれない。npm・nodeのversionは開発環境と本番環境とで揃えておいた方が吉。heroku-buildpack-nodejsを利用するなら、package.jsonは必須。

npm init
echo "/node_modules" >> .gitignore

{
  "engines": {
    "node": "0.10.31",
    "npm": "2.0.0-beta.0"
  },
  "private": true
}

npm install bower

npm install bowerを実行すると、./node_modulesディレクトリにbowerがインストールされる。このとき--saveオプションを付けておくと、package.jsonのdependenciesプロパティ内にbowerに関する情報を追記してくれる。

npm install bower --save

bower init

npm init同様、bower initを実行するとbower.jsonのひな形を生成してくれる。

./node_modules/bower/bin/bower init
echo "/bower_components" >> .gitignore

bower install

例えばtwitter bootstrapのsass版を利用したい場合、bower install bootstrap-sass-officialとやると、./bower_componentsディレクトリにbootstrap-sass-officialがインストールされる。npm install同様、--saveオプションを付けておくとbower.jsonが編集される。

./node_modules/bower/bin/bower install bootstrap-sass-official --save

config.assets.paths

Sprocketsでコンパイルするjavascriptやstylesheetではrequireディレクティブが利用できるが、このとき指定するパスはconfig.assets.pathに登録したディレクトリからの相対パスになる。bowerを利用する場合は、bower_componentsを登録しておく。

# config/application.rb
module MyApp
  class Application < Rails::Application
    config.assets.paths << config.root.join('bower_components')
  end
end

assets

JavaScriptから利用する場合は次のような感じになる。ファイルパスは各bowerパッケージごとにそれぞれ異なるので、./bower_componentsディレクトリの中を見たりして逐次確認する。

// app/assets/javascripts/application.js
//
//= require bootstrap-sass-official/assets/javascripts/bootstrap/transition
//= require bootstrap-sass-official/assets/javascripts/bootstrap/tooltip
//= require bootstrap-sass-official/assets/javascripts/bootstrap/popover

Sassから利用する場合は、直接CSSを利用するならrequireを書くだけで済むが、変数やmixinを利用したい場合は@importを利用することもできる。この場合もパスの指定方法はrequireと同様になる。

@import "bootstrap-sass-official/assets/stylesheets/bootstrap/variables";

heroku-buildpack-multi

Herokuで動かす場合には、nodeとrubyの両方が動作する環境が必要になる。Herokuはデプロイしたコードからアプリケーションの種類を判別し、自動的に利用するBuildpackを選択する。環境変数BUILDPACK_URLを設定すると、利用するBuildpackを変更できる。複数のBuildpackを併用したい場合、heroku-buildpack-multiを利用すると実現できる。.buildpacksに改行区切りでbuildpackのURLを記述しておくと、heroku-buildpack-multiはそれらを利用してくれるようになる。

heroku config:set BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-multi.git
echo https://github.com/heroku/heroku-buildpack-nodejs.git >> .buildpacks
echo https://github.com/heroku/heroku-buildpack-ruby.git   >> .buildpacks

heroku-buildpack-nodejs

利用するnodeとnpmのversionを指定し、bowerを利用できるようにする。heroku-buildpack-nodejsはpackage.jsonを見て適切なものを利用してくれる。

lib/tasks/bower.rake

rake assets:precompileの実行前にbower install --productionが実行されるようにする。このコードは42dev/bower-railsを参考にした。

# lib/tasks/bower.rake
namespace :bower do
  desc "Run `bower install --production` after assets:precompile"
  task :install do
    sh "./node_modules/bower/bin/bower install --production"
  end
end

task "assets:precompile" => ["bower:install"]

rake assets:precompile

手元で確認する場合は、rake assets:precompileを直接実行し、public/assets以下に生成された*.cssや*.jsを確認し、bower由来のコードが意図通り含まれているか確認すると良い。

bundle exec rake assets:precompile