Building frontend stuff with make

Makefile

# Base dirs
SRC_DIR            = src
TMP_DIR            = tmp
DEV_DIR            = dev
SRC_PUBLIC_DIR    := $(SRC_DIR)/public
SRC_STYLES_DIR    := $(SRC_DIR)/styles
SRC_SCRIPTS_DIR   := $(SRC_DIR)/scripts
TMP_SCRIPTS_DIR   := $(TMP_DIR)/scripts
DEV_PUBLIC_DIR    := $(DEV_DIR)/public
DEV_STYLES_DIR    := $(DEV_DIR)/styles
DEV_SCRIPTS_DIR   := $(DEV_DIR)/scripts

# Source files
SRC_PUBLIC_FILES  := $(shell find $(SRC_PUBLIC_DIR) -type f -print)
SRC_PUBLIC_DIRS   := $(shell find $(SRC_PUBLIC_DIR) -type d -print)
SRC_SCRIPTS_FILES := $(shell find $(SRC_SCRIPTS_DIR) -type f -print)
SRC_SCRIPTS_DIRS  := $(shell find $(SRC_SCRIPTS_DIR) -type d -print)
TMP_SCRIPTS_FILES := $(patsubst $(SRC_DIR)/%,$(TMP_DIR)/%,$(SRC_SCRIPTS_FILES))
TMP_SCRIPTS_DIRS  := $(patsubst $(SRC_DIR)/%,$(TMP_DIR)/%,$(SRC_SCRIPTS_DIRS))
DEV_PUBLIC_FILES  := $(patsubst $(SRC_PUBLIC_DIR)/%,$(DEV_DIR)/%,$(SRC_PUBLIC_FILES))
DEV_PUBLIC_DIRS   := $(patsubst $(SRC_PUBLIC_DIR)/%,$(DEV_DIR)/%,$(SRC_PUBLIC_DIRS))
DEV_STYLES_FILES  := $(DEV_STYLES_DIR)/app.css
DEV_SCRIPTS_FILES := $(DEV_SCRIPTS_DIR)/app.js $(DEV_SCRIPTS_DIR)/common.js
DEV_SCRIPTS_DIRS  := $(patsubst $(SRC_DIR)/%,$(DEV_DIR)/%,$(SRC_SCRIPTS_DIRS))

MODULES           := react react-router react/addons reflux superagent moment

export NODE_PATH      := $(NODE_PATH):$(TMP_SCRIPTS_DIR)
export NODE_ENV       ?= development
export SERVER_ADDRESS ?= localhost:3000
export PORT           ?= 4200

.PHONY: all install serve watch test test-unit test-feature clean depclean cleanall

all: install serve

install: node_modules

node_modules: package.json
	npm install
	touch node_modules

dev: $(DEV_PUBLIC_FILES) $(DEV_STYLES_FILES) $(DEV_SCRIPTS_FILES)
	touch reload
	touch dev/.block && rm dev/.block

$(DEV_DIR)/%: $(SRC_PUBLIC_DIR)/% | $(DEV_PUBLIC_DIRS)
	cp $< $@

$(DEV_STYLES_DIR)/%.css: $(SRC_STYLES_DIR)/%.scss | $(DEV_STYLES_DIRS) dev/.block
	./node_modules/.bin/node-sass \
		--include-path node_modules \
		--output $(@D) \
		$<

$(DEV_SCRIPTS_DIR)/common.js: node_modules | $(DEV_SCRIPTS_DIRS) dev/.block
	./node_modules/.bin/browserify \
		--outfile $@ \
		--insert-globals \
		$(foreach module,$(MODULES),--require $(module))

$(DEV_SCRIPTS_DIR)/app.js: $(TMP_SCRIPTS_FILES) | $(DEV_SCRIPTS_DIRS) dev/.block
	./node_modules/.bin/browserify \
		--entry $(TMP_SCRIPTS_DIR)/app.jsx \
		--outfile $@ \
		--insert-globals \
		--extension .jsx \
		$(foreach module,$(MODULES),--external $(module))

.SECONDARY: $(TMP_SCRIPTS_DIR)/%
$(TMP_SCRIPTS_DIR)/%: $(SRC_SCRIPTS_DIR)/% | $(TMP_SCRIPTS_DIRS) dev/.block
	./node_modules/.bin/babel \
		$< \
		--out-file $@ \
		--optional utility.inlineEnvironmentVariables

$(TMP_SCRIPTS_DIRS) $(DEV_PUBLIC_DIRS) $(DEV_STYLES_DIRS) $(DEV_SCRIPTS_DIRS):
	mkdir -p $@

serve: dev node_modules
	./node_modules/.bin/pushstate-server dev $(PORT)

.INTERMEDIATE: dev/.block
dev/.block:
	touch dev/.block

watch: install dev
	fswatch \
		--print0 \
		--recursive \
		--latency 0.5 \
		src | \
	 	xargs -0 -n 1 -I {} make dev

test-unit: export NODE_PATH      := $(SRC_SCRIPTS_DIR)
test-unit: export NODE_ENV       ?= test
test-unit: export PHANTOMJS_BIN  ?= /usr/local/bin/phantomjs
test: test-unit

test-unit:
	./node_modules/karma/bin/karma start --single-run


clean:
	rm -rfv tmp dev

depclean:
	rm -rfv node_modules

cleanall: clean depclean