-
CoffeeScriptとかSASS(SCSS)はコンパイルする必要がある。
gruntを使ってビルドするのがどうも一般的らしい。
例えばgruntファイルはこんな感じ。
module.exports = function(grunt) { grunt.initConfig({ // CoffeeScript coffee: { 'webroot/js/app.js': [ 'web-assets/coffee/app-view.coffee', 'web-assets/coffee/app-model.coffee' ], 'webroot/js/common.js': [ 'web-assets/coffee/common.coffee' ] }, // SASS sass: { dist: { options: { compass: true // Compassライブラリを使用 }, files: { 'webroot/css/default.css': [ 'web-assets/sass/default.scss', 'web-assets/sass/default-form.scss' ], 'webroot/css/dialog.css': 'web-assets/sass/dialog.scss' } } } }); // gruntタスクライブラリを読み込み grunt.loadNpmTasks('grunt-contrib'); grunt.loadNpmTasks('grunt-contrib-sass'); // デフォルトで実行するタスク grunt.registerTask('default', 'coffee sass'); };
しばらくこんな感じで使っていたのだが、
ファイルが増えてくると、
いちいち全てのファイルに対して処理が走るのが邪魔臭くなる。例えばCoffeeScriptの方は、キャッシュとかで再コンパイルまではしないけど、
coffeeコマンドは全部起動してる
sassの方もキャッシュファイルが作成されるから、フルではコンパイルしてないはずだけど、
やたら時間がかかる。いろいろ調べてみたのだが、昔よく使ってたmakeコマンドを思い出した。
Pro*Cのプロジェクトとか、UNIXのミドルウェア開発のプロジェクトではお世話になったもんだ。makeなら、更新されたファイルから、
依存関係をチェックして、必要なファイルだけビルドしてくれるので、
CoffeeScriptとかSASSにはぴったりだ。いきなりMakefileの説明。
ディレクトリ構成は以下
app ├web-assets │├sass │└coffee │ └webroot ├css └js
SASS用のMakefileはこんな感じ
# コマンド SASSC = sass -C COMPASSC = sass --compass -C # PATH CSSPATH = ../../webroot/css SASSPATH = . # 依存関係とコンパイルコマンド all: $(CSSPATH)/default.css $(CSSPATH)/dialog.css $(CSSPATH)/default.css: $(SASSPATH)/default.scss $(SASSPATH)/default-form.scss $(COMPASSC) $(SASSPATH)/default.scss > $@ $(COMPASSC) $(SASSPATH)/default-form.scss >> $@ $(CSSPATH)/dialog.css: $(SASSPATH)/dialog.scss $(SASSC) $< > $@
ビルドのコマンドとかはうまく共通化したかったのだが、できなかった。
続いてCoffeeScript用のMakefile
# コマンド COFFEEC = coffee # PATH JSPATH = ../../webroot/js/gf COFFEEPATH = . # 依存関係とコンパイルコマンド all: $(JSPATH)/app.js $(JSPATH)/common.js $(JSPATH)/app.js: $(COFFEEPATH)/app-view.coffee $(COFFEEPATH)/app-model.coffee $(COFFEEC) -j $@ -c $^ $(JSPATH)/common.js: $(COFFEEPATH)/common.coffee $(COFFEEC) -j $@ -c $^
こちらもコンパイルコマンドの共通化がうまくいかなかった。
C言語ならもうちょっとうまく出来るのだけど、ビルドの手順が違うから難しい。2013/01/10追記)
「$^」を使う事で、依存ファイル全てに展開されるappディレクトリ直下に以下の様なMakefileを置いておけば、
一括でビルドできる。all: cd sass;make cd coffee;make
うーん。やっぱmakeコマンドは優れものだ。
10年以上Makefileをいじってなかったので、研究し直そう。antの方がもうちょっとうまい事書けるんだろうけど、
XMLが苦手なんだよね。。。