Build static assets with make.

Makefile

# source directories
SRC := src
CSS := $(SRC)/css
JS := $(SRC)/js

# publish directory; gets overwritten
PUB := pub

# these directories get copied unchanged from SRC to PUB
COPYDIRS := lib i

# Specify js and css files that are needed in $(PUB).
# These files will be kept up to date with `make build`.
JSFILES := main.js eggs.js pancake.js
CSSFILES := blueberry.css yogurt.css

# javascript minify command; for debugging, try JSMIN := cat
JSMIN := jsmin

# css minify command; for debugging, try simply SASS := sass -C
SASS := sass -C -t compressed

# generic rules

.PHONY: clean copy build watch $(COPYDIRS)

all: clean copy build

clean:
	rm -Rf $(PUB)

copy: $(COPYDIRS)

$(COPYDIRS):
	@mkdir -p $(PUB)
	rsync -rupE $(SRC)/$@ $(PUB)

build: $(addprefix $(PUB)/,$(JSFILES) $(CSSFILES))

watch:
	watchman-make -p '$(CSS)/**' '$(JS)/**' 'Makefile' -t 'build' -p $(patsubst %, '$(SRC)/%/**', $(COPYDIRS)) -t 'copy'

# pattern rules

$(PUB)/%.js: $(JS)/%.js
	@mkdir -p $(JS)
	cat $^ | $(JSMIN) > $@

$(PUB)/%.js:
	@mkdir -p $(JS)
	cat $^ | $(JSMIN) > $@

$(PUB)/%.css: $(CSS)/%.scss
	@mkdir -p $(CSS)
	$(SASS) $< > $@


# Specify additional js dependencies here (optional)
#
# For targets of the form foo.js that come from a single file of the same
# name in $(SRC), no additional rule is necessary.
#
# Rules are necessary for targets that are made from multiple files.  The
# dependencies may or may not include a source file of the same name.

$(PUB)/eggs.js: $(JS)/eggs.js $(JS)/milk.js

$(PUB)/pancake.js: $(JS)/milk.js $(JS)/flour.js $(JS)/eggs.js


# Specifiy css dependencies here
#
# A css file is always compiled from a single scss file of the same name
# in $(SRC).  For files with @imports, it is necessary to specifiy the
# list of dependencies so that make knows when to rebuild.  List the
# main scss file first followed by all of the imported files.
#
# If no files are imported, then no rule is necessary here.

$(PUB)/blueberry.css: $(CSS)/blueberry.scss $(CSS)/fruit.scss