Asset Pipelines with Make Cheatsheet

[!NOTE] Historical Pattern: Using GNU Make as a frontend asset pipeline was common before Vite, Webpack, and esbuild became standard. It remains a lightweight approach for simple projects without heavy build runners.

Basic Compilation Pattern

bin := ./node_modules/.bin

all: build/app.js

build/%.js: src/%.coffee
	@mkdir -p $(@D)
	@$(bin)/coffee < $< > $@

---

CSS Pipeline with Stylus & Autoprefixer

bin := ./node_modules/.bin
stylus := $(bin)/stylus
autoprefixer := $(bin)/autoprefixer
styl_files := $(shell find web/ -name "*.styl")

all: public/app.css

public/app.css: css/app.styl $(styl_files)
	@mkdir -p $(@D)
	@$(stylus) $< | $(autoprefixer) -b "> 1%" > $@

---

File Watching Loop

A simple shell loop for re-running make targets on file changes:

watch:
	@echo "... watching for file changes"
	@while true; do make -s; sleep 1; done

---

JavaScript Bundling with Browserify

js_files := $(shell find web/ -name "*.js")

public/app.js: web/app.js $(js_files)
	@mkdir -p $(@D)
	@$(browserify) -t [ cssify -x .css ] $< > $@

---

References

• GNU Make Official Manual