GruntからMakeへ

load-grunt-configを使ってGruntfileに書く設定などをタスク毎に分割できるようになったとはいえ、1ファイルに書く量が減ってもファイルが分割されただけで、書くのが辛いのは変わらないままなのでgulpに移行……してみようかとも思ったのだけど、BrunchとかBroccoliとかビルドしたいだけなのになんでツールこんなにたくさんあるの、またトレンドとかで変わるんでしょ、node.jsベースのビルドツールからすこし離れてみようか、と久しぶりにMakefileを書いてみたりしたのでした。

それでも、ローカルでサーバを立てるところはGruntを使っていたりするところがなんだかなあという感じがしますが。LiveReloadも出来るインストールが簡単なサーバというのが見つからなかったのでまあしょうがないかというところ。

ファイルの監視にはfswatchを使っています。なかなか便利なコマンドかも。

package.json

{
  "private": true,
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^0.8.0",
    "grunt-este-watch": "^0.1.17",
    "jade": "^1.5.0",
    "node-sass": "^0.9.3"
  }
}

Gruntfile.coffee

module.exports = (grunt) ->

  grunt.initConfig

    connect:
      server:
        options:
          base: 'public'
          livereload: true

    esteWatch:
      livereload:
        enabled: true

  grunt.loadNpmTasks 'grunt-contrib-connect'
  grunt.loadNpmTasks 'grunt-este-watch'

  grunt.registerTask 'default', ['connect', 'esteWatch']

  return

Makefile

# 入力元ディレクトリと出力先ディレクトリ
SRC  := source
DEST := public

# 各種ファイル（先頭が_で始まっているファイルは省く）
FILES := $(shell find $(SRC) -type f -regex '.*/[^_]*')

# Jade
# 出力先を変更するためpatsubstで置換 + JADE変数のリストの拡張子を置換
JADE := $(filter %.jade,$(FILES))
HTML := $(patsubst $(SRC)/%,$(DEST)/%,$(JADE:.jade=.html))

# Scss
# 出力先を変更するためpatsubstで置換 + SASS変数のリストの拡張子を置換
SASS := $(filter %.scss,$(FILES))
CSS  := $(patsubst $(SRC)/%,$(DEST)/%,$(SASS:.scss=.css))

# ローカルにインストールしたモジュールの実行ファイルのパス
BIN := $(shell npm bin)

# jadeコマンドとそれに渡すオプションの指定
JADEC := $(BIN)/jade
JADEFLAGS :=

# node-sassコマンドとそれに渡すオプションの指定
SASSC := $(BIN)/node-sass
SASSFLAGS := --output-style compressed

# JadeをHTMLに変換するコマンドの指定
$(DEST)/%.html: $(SRC)/%.jade
	@$(JADEC) $(JADEFLAGS) --out $(dir $@) $<

# ScssをCSSに変換するコマンドの指定
$(DEST)/%.css: $(SRC)/%.scss
	@$(SASSC) $(SASSFLAGS) $< $@

# HTMLとCSSを生成するallターゲット
# 生成した後、ついでにLiveReloadサーバに対してリクエストを投げる
.PHONY: all
all: $(HTML) $(CSS)
	-@curl http://localhost:35729/changed?files=`printf '$(notdir $?)' | tr ' ' ,`

# 生成したHTMLとCSSを削除するcleanターゲット
.PHONY: clean
clean:
	@$(RM) $(HTML) $(CSS)

# 一部の変数を書き換えてallターゲットを実行するdevターゲット
.PHONY: dev
dev: JADEFLAGS := --pretty
dev: SASSFLAGS := --source-comments map --source-map
dev: all

# fswatchを使ってファイルが変更されたらdevターゲットを実行するwatchターゲット
.PHONY: watch
watch:
	@fswatch -r $(SRC) | xargs -I{} $(MAKE) dev

ローカルサーバの起動は

Terminal

$ grunt

で、ビルドは

Terminal

$ make watch

か、make allかmake devとか。もしくはVimとかEmacsならwatchしなくてもエディタからmakeを実行しても良いのかもしれない。

---

自分一人ならこれでも良いのだけど、複数人で開発するときにMakefileだといろいろ困るかもしれない。GruntfileはメンテできてもMakefileをメンテできるJSerが多いとは思えないし……

Makefileの自動変数がなかなか覚えにくい。毎回書くたびに調べてるのだけどその分、短く書けているような気がしないでもないというか。あとパッと見なにやってるかわからない。

あとはWindows環境だとまあいろいろ困るというか。Windows環境も考慮する必要がある場合はGrunt等のほうが絶対に良いはず。

Makeの実行が速くてとっても良い感じ。Gruntは若干もたつきがある気がする。

Gruntのプラグインをたくさんインストールする必要がないところも良いと思う。