Makefile - ジニーフレーム - プロジェクト管理ツール

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