Sprockets

画像ファイルや javaScript や Stylesheets など、Webアプリケーションの直接のレスポンスではない構成要素をアセットと呼びます。このアセットファイルにアクセスするためのパスを管理したり、コンパイルする機能を提供するのが Sprockets という gem です。

• sstephenson/sprockets · GitHub

README.md の「Serving Assets Over HTTP」部分を読むと、使い方がわかると思います。

以前に『uglifier とは何をする gem なのか - Programming log - Shindo200』という記事で「Rails がどのタイミングで uglifier を動かしているのかはわからないのですが〜」と書いたのですが、アクセスが来たときに（もしくはプリコンパイル機能を使って事前に） Sprockets が uglifier を呼び出して JavaScript のコードを軽量化しているようですね。

environment.js_compressor  = :uglify

Sprockets による依存性の管理

Sprockets にはアセットファイルの依存性を管理する機能があります。依存するファイルはコメントの後に「=」を書くことで指定できます。

//= require jquery

このファイルにアクセスすると、Sprockets は管理されているアセットパス下から「jquery.js」というファイルがあるか探しにいくそうです。

Railsアプリケーションの場合は app/assets/javascripts/application.js や app/assets/stylesheets/application.css にこのような記述があります。（このファイルを「マニフェストファイル」と呼ぶそうです。詳しくは『パーフェクト Ruby on Rails』 P.100 で。）それぞれの中身を確認してみます。

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

「require_tree」「require_self」という構文が出てきました。「require_tree」と「require_self」はそれぞれ以下のような動作をします。（『パーフェクト Ruby on Rails』P.100 表3.1 を参考にまとめました。）

application.js の方は「jquery」「jquery_ujs」「turbolinks」を読み込んだ後に app/assets/javascripts/ 下にあるファイルを読み込む。application.css の方は app/assets/stylesheets/ 下にあるファイルを読み込んだ後に、自身のファイルを読み込むということが書かれているのですね。

application.css は「require_tree .」が先？

先ほど application.css を中身を確認してみましたが、『パーフェクト Ruby on Rails』P.101 リスト3.12 では次のように書かれています。

リスト3.12 app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

書籍では「require_self」が「require_tree .」より先に書かれています。Rails 4.1.1 で生成した application_css と中身が違うのですが、これは何なのでしょうか。どうやら、Rails 4.1.0 から「require_tree .」が先に読み込まれるように変更されたようです。（『Changed stylesheet load order in the stylesheet manifest generator. by pawel2105 · Pull Request #11640 · rails/rails · GitHub』を参考。）application.css に定義した値を優先したかったのに、DHH が勘違いで実装していて、Rails 4.1.0 でそれを修正したという感じでしょうか。

JavaScript のコードと CoffeeScript のコードの対応関係を出力する

coffee-rails-source-maps という gem を使うと、JavaScript のコードと CoffeeScript のコードの対応関係が書かれたマッピングファイルを出力してくれるようになります。

• markbates/coffee-rails-source-maps · GitHub

試しに RailsTutorial で作ったサンプルアプリケーションに導入してみました。

本来はコンパイルされた JavaScript のコードでの行数が表示されますが、CoffeeScript のコードでの行数が表示されていますね。