[node.js + express]クライアントサイドの JavaScript を CoffeeScript化 & 複数ファイルを結合 & 縮小化する

(2013/1/14 追記) サーバーサイドのプログラムをCoffeeScript で記述する方法をこちらにまとめました。

実行環境
OS: Mac OS X 10.8.2
node: v.0.8.3
express: v3.0.3
connect-assets: v2.3.3

CoffeeScript の導入

クライアントサイドの CoffeeScript のコンパイルや、複数の JavaScript ファイルの結合、縮小化(Rails の Asset Pipleline 機能と同等の機能)をするには、connect-assets モジュールが便利です。
今回の記事では、 connect-assets で JavaScript を扱う基本的な方法を説明します。(なお、このモジュールでは css も同様に扱えますが、この記事では触れていません。)


connect-assets の設定

require してミドルウェアを設定します。

app.use(require('connect-assets')());

CoffeeScript(JavaScript) ファイルの保存場所

アプリケーションの直下に asset/js というディレクトリを作成し、ここに .coffee(.js) ファイルを保存します。

myApplication/
  |_ assets/
      |_ js/
          |_application.coffee
          |_jquery.js

view から JavaScript をロード

view からコンパイル済みの JavaScript　をロードするには、 js() 関数にファイル名を渡します。
この関数はコンパイル済みの JavaScript を指す <script> タグを文字列で返すので、jade で実行する場合は下記のように != で呼び出す必要があります。

!= js('application')

レンダリング結果は下記のとおり

<script src="/js/application.js"></script>

ファイルの依存関係

CoffeeScript(JavaScript)ファイルの依存関係は、コメントで定義します。例えば、以下のようなファイル構成で、

myApplication/
  |_ assets/
      |_ js/
         |_ application.coffee
         |_ foo.coffee
         |_ bar.coffee

application.coffee が foo.coffee と bar.coffee に依存している場合は、application.coffee で以下のように依存関係を定義します。(JavaScript の場合は //= )

application.coffee

#= require foo.coffee bar.coffee

この状態で　jade で　!= js('application') を実行すると、下記の結果が得られます。

<script src='/js/foo.js'></script>
<script src='/js/bar.js'></script>
<script src='/js/application.js'></script>

特定のディレクトリ以下のファイルをすべて依存ファイルとして指定するには、下記のように記述します。

#= require_tree ./

結合・縮小化

アプリケーションを production モードで実行している場合は、依存ファイルの結合と、ファイルの縮小化が実行されます。結合・縮小化済みファイルは、デフォルトでは builtAssets ディレクトリに保存されるので、あらかじめ assets ディレクトリと同じ構成で builtAssets を作成しておく必要があります。

myApplication/
  |_ assets/
  |  |_ js/
  |     |_ application.coffee //foo.coffee と bar.coffee に依存
  |     |_ foo.coffee
  |     |_ bar.coffee
  |
  |_ builtAssets/
     |_ js/

この状態で production モードでアプリケーションを実行し、下記 jade ファイルを実行すると、

!= js('application')

以下のように結合・縮小化されたファイルが生成されました。

myApplication/
  |_ assets/
  |  |_ js/
  |     |_ application.coffee
  |     |_ foo.coffee
  |     |_ bar.coffee
  |
  |_ builtAssets/
     |_ js/
        |_ application-38a0083f4a868f2797aba944e5ce3ad6.js

js() が生成する <script> タグは、src 属性でこのファイルを指定します。
結合前のファイルに変更があるたびに、新しいファイルが生成されますが、js() 関数は常に最新のファイル指定する <script> タグを返してくれます。

さらに、結合済みファイルは Expires ヘッダがかなり長く設定されるので、とても効率の良い JavaScript の配布が可能となります。

まとめ

• connect-assets モジュールを使うと、JavaScript の結合と縮小化、 CoffeeScript での記述が可能になる。
• .js, .coffee ファイルは、 assets ディレクトリに配置する。
• view からは、js() 関数で JavaScript をロードする。
• アプリケーションを production モードで実行すると、コンパイル、結合、圧縮済みのファイルが、 builtAssets ディレクトリに生成される。