Elm <> Tailwind Makefile with elm-watch

Makefile

PATH  := $(PWD)/node_modules/.bin:$(PATH)
SHELL := /bin/bash

# Assumes the following structure:
# source-dir
#   - public
#     - styles.css (main CSS file with Tailwind directives)
#     - index.html (entry index.html with css and javascript links
#     - index.js (main JS file that inits Elm app and implements ports
#   - src/App.elm (elm entry file)
#   - tailwind.config.js
#   - elm-watch.json
#   - elm.json
# requires uglifyjs, css-minify, tailwind, elm-watch, and elm

build: clean \
	.node \
	format \
	dist \
	.public \
	dist/output.css \
	dist/app.js \
	dist/optimize-js

dev: clean \
	.node \
	.public-dev \
	dev-project

dev-project:
	make -j 2 dev/output.css dev/app.js

dist/optimize-js:
	which uglifyjs
	uglifyjs dist/app.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output dist/app.min.js
	@ echo -e "\nMinified size: `wc -c <dist/app.min.js` bytes (dist/app.min.js)"
	@ echo -e "Gzipped size: `gzip dist/app.min.js -c | wc -c` bytes\n"
	rm -f dist/app.js
	mv -f dist/app.min.js dist/app.js

dist/output.css:
	npx tailwind -i ./public/styles.css -o $@
	rm dist/styles.css
	css-minify -f $@ -o dist
	mv dist/output.min.css $@ 

dev/output.css:
	npx tailwind -i ./public/styles.css -o $@ --watch

dist/app.js: $(shell find src -type f -name '*.elm')
	elm make src/App.elm --optimize --output=$@
	@ echo -e "Compiled size: `wc -c <$@` bytes ($@)\n"

dev/app.js:
	npx elm-watch hot

.public: dist $(shell find public/ -type f)
	@ rsync -r public/ dist/

.public-dev: dist $(shell find public/ -type f)
	@ rsync -r public/ dev/

format:
	elm-format src/ --yes

clean:
	rm -rf dist dev elm-stuff

dist:
	@ mkdir $@

dev:
	@ mkdir $@

.node :package.json
	yarn --no-audit
	touch $@