Asset Pipelineについて復習

概要 (ここを見ながら)

• JavaScriptおよびCSSに対し、結合 and (最小化 or 圧縮)を行うフレームワーク
• CoffeeScript / Sass / ERBのような他言語で書いても処理してくれる

Rails 3.1より前はJammitおよびSprocketsのような3rdパーティライブラリを使い

実現していた。3.1ではSprocketsとデフォルトで (ActionPackが) 統合されている。

デフォルトではアセットパイプラインが有効になっている。

無効にするには config/application.rb で次のように設定する。

# Enable the asset pipeline
config.assets.enabled = false

圧縮やダイジェストの設定は config/environments/xxxx.rb で設定されてる。

config.assets.compress = true (production.rb)
config.assets.digest = true  (production.rb)

上記を読んで分かったつもりになってはいけない、ということで動作確認

テストアプリケーションを用意

$ rails new assetpipelinetest
$ rails g scaffold book title:string author:string
$ rm public/index.html
$ config/routes.rb
     root :to => 'books#index'
$ rake db:migrate 

ファイルの読み込みを確認 (Development)

次の3ファイルを作成

• app/assets/javascripts/a.js
• lib/assets/javascripts/b.js
• vendor/assets/javascripts/c.js  

起動後にトップページへアクセスし確認、ソースを見るとa.jsだけが読み込まれている。

<script src="/assets/a.js?body=1" type="text/javascript"></script>

しかし、b.jsとc.jsは読み込まれていない。a.jsが読み込まれているのは

application.js (マニフェストファイル) に次の記述があるから。

//= require_tree .

これにより、appliation.jsと同じかサブディレクトリに存在する

JavaScriptやCofeeScriptを自動で読みこむ。

続けてbとcを読み込むようにマニフェストファイル編集

//= require b
//= require c

<script src="/assets/b.js?body=1" type="text/javascript"></script>
<script src="/assets/c.js?body=1" type="text/javascript"></script>

これで3つのjsファイルが読み込まれるようになった。

cssについても、マニフェストファイル (application.css) に書けば読み込まれる。

プリコンパイル (Production)

まずはテーブルを用意

rake db:migrate RAILS_ENV=production

単にWEBrickを起動しただけでは次のエラーが出る。

ActionView::Template::Error (application.css isn't precompiled):

そのため、プリコンパイルせねばならぬ。

rake assets:precompile

これで public/assets にアセットファイルが用意される。

application-00e4a643d1be5b0c4b39be21673d21b2.css
application-4f4e444aeb28497bca7d81506213536e.js

同コマンドで作られるmanifest.ymlには

アセットファイルと実際のファイル名が記述されている。

application.js: application-4f4e444aeb28497bca7d81506213536e.js
application.css: application-00e4a643d1be5b0c4b39be21673d21b2.css

上記はダイジェストが有効な状態での実行結果。

試しに無効化して再度コンパイルすると、manifest.ymlの中は次のようになる。

application.js: application.js
application.css: application.css 

config.assets.compressをfalseにした場合は

application.jsやapplication.cssの中身が圧縮されない。

また、他の特徴として、コンプレッサの指定指定も可能。

とりあえずこんなところか。