• teruchiです。
    一年ぶりにブログに投稿してみる。

    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が苦手なんだよね。。。

    Top