2013年4月28日日曜日

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の中身が圧縮されない。
また、他の特徴として、コンプレッサの指定指定も可能。

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

0 件のコメント:

コメントを投稿