2013-03-03

Rails のアセットパイプライン（Assets Pipeline）は JavaScript や CSS、画像ファイルといった HTML に付随する細々としたファイル達（アセットファイル）を連結したり圧縮することで効率的にアクセスできるようにする仕組み（フレームワーク）です。

アセットパイプラインは以下のような役割をもっています。

1	複数の JavaScript と CSS をそれぞれ１つのファイルに連結する ⇒ ブラウザからのリクエスト数を減らす
2	JavaScript と CSS を圧縮してサイズを減らす ⇒ 文法上必要でない空白を削除したり、変数名を1文字にしたり
3	アセットファイル名にハッシュ値（MD5）を付加する ⇒ ブラウザがファイルのキャッシュ/読み直しを正しく行える
4	ERB、CoffeeScript、SCSS などを使って効率的で柔軟な方法で記載できる

productionモードでの動きが最終的な目的となる動きなので、それを中心に説明します。

自分で作成するアセットファイルは app/assets/ 下のファイルの種類ごとのサブディレクトリに格納します。

coffee スクリプトファイルや scss ファイルを置くことができます。直接 js ファイルや css ファイルを置いてもOKです。

アセットファイルへは assets ディレクトリ下のファイルとしてアクセスします。ファイル種ごとのサブディレクトリ名は不要です。

http://RailsアプリのURL/assets/ファイル名

また coffee スクリプトや scss は、js ファイルや css ファイルとして解釈されたファイルにアクセスします。

元のファイル	URLでのアクセス
assets/javascripts/application.js.coffee	http://******/assets/application.js
assets/stylesheets/application.css.scss	http://******/assets/application.css
assets/images/logo.png	http://******/assets/logo.png

アセットファイルが上のようにURLでアクセスするにはプリコンパイルをする必要があります。プリコンパイルは次のような働きをします。

1	app/assets/、lib/assets/、vendor/assets/ 等から対象ファイルを探索
2	ERB、CoffeeScript、SCSS などのエンジンを使って JavaScript、CSS ファイルに展開
3	複数の JavaScript や CSS をそれぞれ１つのファイルに連結
4	JavaScript と CSS を圧縮
5	アセットファイル名にハッシュ値（MD5）を付加例）application.css ⇒ application-908e25f4bf641868d8683022a5b62f54.css
6	できあがったアセットファイルを public/assets/ ディレクトリに保存対象ファイル：JavaScript、CSS、画像ファイル

デプロイの前にプリコンパイルをしておきましょう。コマンドラインから実行します。これをやっておかないと、アクセス時に「ファイルがプリコンパイルされていないよ」と怒られます。

$ rake assets:precompile

アセットパイプラインの特徴を生かすためには事前にプリコンパイルをしておくべき。でも、プリコンパイルされていないファイルを動的にプリコンパイルするよう設定しておくこともできます。

config.assets.compile = true

ファイル名にハッシュ値がつくということは、内容が少しでも変わる度に別のファイル名で保存されるということです。以前にプリコンパイルされた古いアセットファイルが public/assets/ ディレクトリにずっと残ってしまいますので、毎回削除してからプリコンパイルした方がいいでしょう。

public/assets/ 内に直接ファイルを作成しないように気をつけてください。

$ rm -rf public/assets
$ rake assets:precompile

ちなみに、アセットファイル名にハッシュをつけないように設定することも可能です。

config.assets.digest = false

今回は以上です。次回はプリコンパイルの対象となるファイルについて書きます。

Rails つまみぐい