nanoc - CSS, JavaScript を Minify！

nanoc は、デフォルトではコンパイルしても CSS や JavaScript ファイルは Minify されません（改行・余分な半角スペースが残ったまま）。

HTTP リクエス回数を減らしアクセススピードを上げるためには、Minify した方がよいです。
それほど大きなサイトでなければ、Minify したからと言っても高速化は体感できないかも知れません。
しかし、それでも HTTP リクエスト回数のことを考えれば、 Minify しておいた方がよいように思います。

0. 前提条件

• Linux Mint 14 Nadia (64bit) での作業を想定。
• nanoc 3.4.3 を使用。
• Ruby 1.9.3-p385 を使用。
• nanoc 用ブログヘルパー（Blogging, Rendering, LinkTo, Tagging）のインクルード設定済みで、nanoc をブログとして利用できるように各種設定も済んでいる。
• JavaScript ファイルは assets/javascripts/ というディレクトリに配置している。
• CSS ファイルは assets/stylesheets/ というディレクトリに配置している。
• JDK(Java Development Kit) 導入済み。
  （使用するRubyGems パッケージが Java ライブラリを使用するので、おそらく必要（当方は元々インストール済みだった））

1. RubyGems パッケージインストール

Java ライブラリによる CSS, JavaScript を Minify する YUI Compressor を実装した RubyGems パッケージ yuicompressor をインストールする。
（YUI Compressor には数種類あるが nanoc で使用するのは yuicompressor なので要注意）

$ sudo gem install yuicompressor

2. Rules 編集

nanoc コンパイル時に yui-compressor フィルターが適用されるよう Rules ファイルを編集する。
以下は当方の例で、全ての JavaScript, CSS ファイルに適用している。

File: Rules

compile '/assets/javascripts/*/' do
  filter :yui_compressor, :type => :js
end

compile '/assets/stylesheets/*/' do
  filter :yui_compressor, :type => :css
end

3. 確認

nanoc をコンパイルしてみて、コンパイル後の CSS, JavaScript ファイルの内容を確認してみる。
改行や余分な半角スペースが除去され１行にまとめられているはず。
以下は当方の CSS の例。

【コンパイル前】

【コンパイル後】

---

これで、CSS, JavaScript ファイルが Minify されました。

コンパイル前に別途 Minify ツールを使用して Minify しておくという方法もあります。
しかし、コンパイルのたびにツールを使用するのも面倒ですし、せっかくフィルタが使用できるので、コンパイル時に処理してみた次第です。

ちなみに、nanoc によるブログを Octopress によるメインのブログのクローンとして公開しています。

• mk-mode BLOG (by nanoc)

但し、mk-mode BLOG (by Octopress)の記事を機械的に変換しているため、人知の及ばない部分もあるかと思います。ご了承下さい。

以上。