This gist accompanies https://github.com/pwenzel/fswatch-makefile. It shows how one might build a tiny build system for a website using a Makefile.

01-Makefile

# Example Makefile for compiling CSS and Javascript in watched folder

PHONY: optimize

css:
	@cat assets/css/normalize.css assets/css/app.css > public/assets/all.css
	@echo Built all.css

js:
	@cat assets/js/jquery.js assets/js/jquery.cookie.js assets/js/app.js > public/assets/all.js
	@echo Built all.js

watch:
	@echo Watching for changes...
	@fswatch assets/css:assets/js "echo changed && make css js" 

optimize: css js
	@yuicompressor assets/all.css -o assets/all.css
	@yuicompressor assets/all.js -o assets/all.js
	@echo Optimized all.js

02-Makefile

# Example Makefile for compiling Javascript in watched folder

PHONY: optimize

js:
	@cat assets/js/jquery.js assets/js/jquery.cookie.js assets/js/app.js > public/assets/all.js
	@echo Built all.js

watch:
	@echo Watching for changes...
	@fswatch assets/js "echo changed && make js" 

optimize: css js
	@yuicompressor assets/all.js -o assets/all.js
	@echo Optimized all.js

03-Makefile

# Example Makefile for compiling CSS in watched folder

PHONY: optimize

css:
	@cat assets/css/normalize.css assets/css/app.css > public/assets/all.css
	@echo Built all.css

watch:
	@echo Watching for changes...
	@fswatch assets/css "echo changed && make css" 

optimize: css js
	@yuicompressor assets/all.css -o assets/all.css
	@echo Optimized all.js

04-Makefile

# Kitchen Sink Makefile for compiling CSS and Javascript in watched folder
# Uses variable lists for folks who like complexity
# Creates a version file in your project for asset versioning

PHONY: css js version

cssfiles = 'assets/css/normalize.css' 'assets/app.css'
jsfiles = 'assets/js/jquery.js' 'assets/js/jquery.cookie.js' 'assets/app.js'

css: $(cssfiles)
	@echo Built all.css

js: $(jsfiles)
	@echo Built all.js

$(cssfiles): 
	@cat $@ >> assets/all.css

$(jsfiles): 
	@cat $@ >> assets/all.js

watch:
	@echo Watching for changes...
	@fswatch assets/css:assets/js "echo changed && make clean && make" 

optimize: css js version
	@yuicompressor assets/all.css -o assets/all.css
	@yuicompressor assets/all.js -o assets/all.js
	@echo Optimized

version:
	@echo `date +%s` > version	

clean:
	@rm -f assets/all.css assets/all.js version

Readme.md

This gist accompanies https://github.com/pwenzel/fswatch-makefile.

It shows how one might build a tiny build system for a website using a Makefile.