A build process to a HTML/JavaScript/CSS project.

Makefile

INDEX_DIR		:= /home/www/project-foo
BUILD_DIR 		:= $(INDEX_DIR)/build
JS_DEBUG 		:= $(BUILD_DIR)/app-debug.js
JS_FINAL 		:= $(BUILD_DIR)/app.js
CSS_COMBINED 		:= $(BUILD_DIR)/app-combined.css
CSS_FINAL 		:= $(BUILD_DIR)/app.css
# src files
JS_FILES 		:= wrapper-head.js \
			  utils.js \
			  app.js \
			  wrapper-tail.js
HTML_FILES 		:= index.html
CSS_FILES 		:= app.css
# bin (which cleancss)
CLEANCSS 		:= /usr/local/bin/cleancss
CLEANCSSFLAGS 		:= --skip-restructuring -o
POSTCSS 		:= /usr/bin/postcss
POSTCSSFLAGS 		:= --use autoprefixer -b "last 2 versions"
JSHINT 			:= /usr/bin/jshint
UGLIFYJS 		:= /usr/local/bin/uglifyjs
UGLIFYJSFLAGS 		:= --mangle --mangle-regex --screw-ie8 -c warnings=false -o
NODEMON 		:= /usr/bin/nodemon
PARALLELSHEL	 	:= /usr/bin/parallelshell

# just to create variables like NODEMON_JS_FLAGS when called
define NodemonFlags
	UP_LANG = $(shell echo $(1) | tr '[:lower:]' '[:upper:]')
	NODEMON_$$(UP_LANG)_FLAGS := --on-change-only --watch "." --ext "$(1)" --exec "make build-$(1)"
endef

# targets
build-watch: build watch

watch:
	$(PARALLELSHELL) "make watch-js" "make watch-html" "make watch-css"

build: build-html build-js build-css

build-js: combine-js jshint uglifyjs
	@echo "Build JS ... OK"

build-css: combine-css cleancss
	@echo "Build CSS ... OK"

build-html: $(HTML_FILES)
	@for file in $? ; do \
		cat $$file | \
		tr -d '\t\n\r\f' | \
		tr -s [:space:] ' ' | \
		perl -pe 's/> </></g' \
		> $(INDEX_DIR)/$$file ; done
	@echo "Build HTML ... OK"

uglifyjs:
	@$(UGLIFYJS) $(JS_DEBUG) $(UGLIFYJSFLAGS) $(JS_FINAL)

jshint:
	@$(JSHINT) $(JS_DEBUG)

cleancss:
	@$(POSTCSS) $(POSTCSSFLAGS) $(CSS_COMBINED) | $(CLEANCSS) $(CLEANCSSFLAGS) $(CSS_FINAL)

combine-js:
	@cat $(JS_FILES) > $(JS_DEBUG)

combine-css:
	@cat $(CSS_FILES) > $(CSS_COMBINED)

watch-js: $(JS_FILES)
	$(eval $(call NodemonFlags,js))
	@$(NODEMON) $(NODEMON_JS_FLAGS)

watch-html: $(HTML_FILES)
	$(eval $(call NodemonFlags,html))
	@$(NODEMON) $(NODEMON_HTML_FLAGS)

watch-css: $(CSS_FILES)
	$(eval $(call NodemonFlags,css))
	@$(NODEMON) $(NODEMON_CSS_FLAGS)
	
.DEFAULT_GOAL := build