asset pipeline のちょっとしたまとめ( require とか優先読込)

asset pipeline は Rails3.1 から標準で実装されている、app/assets 以下にスタイルシートやスクリプト、画像を配置すると、それらを一つのファイルに結合して、出力してくれる機能。

基本的にはこの中のディレクトリに配置すれば勝手に読み込んで出力してくれるが、ちょっとカスタムしてやりたいことがあったので備忘録&共有。

jQuery Mobile を導入したい

スマートフォンレイアウトと切替を行いたいので、JPMobile を導入してビュー切替をまかせます。

jQuery Mobile は gem があったのでそれを使います

今回は gem を使って導入しましたが、assets/ のそれぞれ jQuery Mobile を入れてもよいかと思います。

gem 'jpmobile'
gem 'jquery_mobile-rails'

JPMobile で layout/application_smart_phone.html.erb が読み込まれるようにして、js / css の読み込みは以下のように。

<%= stylesheet_link_tag    "smart_phone/application" %>
<%= javascript_include_tag "smart_phone/application" %>

ファイルは assets/(javascripts|stylesheets)/smart_phone/ の様にサブディレクトリをつくって、必要なファイルを突っ込みました。

smart_phone/ の application.(js|css) で jQuery Mobile を require しました。

# assets/javascripts/smart_phone/application.js
= require jquery_mobile
# assets/stylesheets/smart_phone/application.css
= require jquery_mobile

のように追加します。もちろん jQuery の読み込みよりも下に記述します。

このままだと、通常のレイアウトでも smart_phone/ のファイルまでコンパイルしてしまうので、同じディレクトリだけを対象とするように次項の作業をしました。

サブディレクトリを読み込まない

application.css の中で require_tree . が使われているところを、require_directory . にすると、同じディレクトリ内のファイルだけがコンパイルされます。

assets/application.(js|css) の tree を書き換えました。

特定のファイルを優先的に読み込む

jQuery Mobile の初期設定をするために、読み込む順序に気をつけないといけません。

//= require smart_phone/mobileinit
//= require jquery_mobile

上記のように、明示的に require で jQuery Mobile よりも先に定義することで、優先的に読み込ませることが出来ました。

また、require に指定したファイル以外はファイル名順でソートされて読み込む順番が決まるようなので、接頭語として数字をつけるなどしても制御できました。

0_initial.js.coffee
1_foo.js.coffee
2_bar.js_coffee

こっちの方が簡単ですね。

もっと良い方法(特に jQuery Mobile の導入について)があったらご指摘いただけると幸いです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする