Rails4 でフォントの precompile に関する問題の解決策

Rails4 で twitter bootstrap を使うときなどに、prooduction 環境だと絵文字が"トウフ"なのだわーウフフという悲しみ、あります。

主に以下の2つが問題のようでした。

• vendor 以下のフォントファイルが rake assets:precompile で public/assets にコピーされない
• rake assets:precompile でコピーされたフォントファイル名に digest が付与されてしまい、CSS から読み込めていない

解決策

assets:precompile でなんとかする場合は以下の手順でOKでした。
（自前でフォントを public/assets にコピーという対応方法もある）

1. フォントを precompile 対象に含める

まずは次のどちらかの方法でフォントファイルを precompile 対象にしてやる。

• フォントファイルを app/assets/fonts に配置
• フォントファイルを vendor/assets/fonts に配置 & precompile 対象に含める設定を追加

config/initializers/assets.rb

# 以下を追加
Rails.application.config.assets.precompile += %w( *.svg *.eot *.woff *.ttf )

2. フォントファイル名に付与される digest をなんとかする

次のどちらかの方法で digest をなんとかする。

• CSS側でなんとかする: sass/scss に変更して url(...) を font-url(...) に変更
  • sass にした時点でインデントとかもろもろ修正しないといけない、つらい。。。
  • css.erb にして url(<%= asset_path("...") %>) の方が楽？
• フォントファイル名をなんとかする: non-stupid-digest-assets を利用する
  • non-stupid-digest-assets
    • https://github.com/alexspeller/non-stupid-digest-assets
    • rake assets:precompile で digest 付きファイル作成時に digest なしのファイルも作成してくれる gem
  • Gemfile に追加、bundle install 後、以下の様に設定

config/initializers/non_digest_assets.rb

NonStupidDigestAssets.whitelist = [/glyphicons-halflings-regular\.(eot|svg|woff|ttf)/]

なんか不足あれば教えてくださいませ。。。
あと、map ファイルとかも同様の方法で参照を解決してやると多少幸せになれるかも。

原因

1. Rails4 で vendor 下が js/css 以外の precompile 対象外になったらしい
   （ https://github.com/rails/rails/pull/7968 ）

• Rails4 では precompile したファイル名に必ず digest が付与されてしまう

Rails4 というか正確には sprockets-rails なのかな。
2については Issue が大変なありさまに。。。

• https://github.com/rails/sprockets-rails/issues/49
• https://github.com/rails/rails/issues/10810

sprockets-rails では自前 rake task でなんとかしろ、って言ってるんだけど、、、どうなのそれ。。。

参考

• http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline/17367264#17367264
• http://stackoverflow.com/questions/19347990/font-asset-without-digest-in-ruby-on-rails-4
• http://blog.monochromegane.com/blog/2013/09/07/rails4-only-compile-under-app-assets/
• https://github.com/rails/rails/pull/7968