General documentation / cheat sheets for various languages and services

Make(file) Documentation

Other good references:

Variables

Variables with names longer than one character, e.g., VAR, must be accessed using $(VAR) syntax, not $VAR (which would be interpreted as $(V)AR).
= defines a recursively expanded variable; the right-hand side is expanded lazily (when the variable's value is used elsewhere), so it can contain references to variables defined later.
:= defines a simply expanded variable; it is expanded immediately and set permanently.
?= defines a variable iff it not already defined.

Special variables

$@: The file on the left side of the rule, i.e., the file currently being made; the "target".
$<: The first dependency on the right side of the rule. This should the main dependency. Often we see the sequence <$< in a build step; $< is the input, and it looks like the STDIN file descriptor.
$+: A list of all dependencies on the right side of the rule.
$^: Like $+, but unique'd.
$?: All of the dependencies that are newer than the target — the files that are triggering the rule, i.e., the why?
$|: Everything after a | in the dependencies.
$*: The value matched by the % wildcard in the build step's rule.
$$: A literal dollar sign. Useful when writing bash scripts in make build steps.

Modifiers:

D: Append D to any special variable to get just the directory part of the filepath, e.g., $(+D); shorthand for $(dir $+).
F: Append F to any special variable to get just the file part of the filepath.

Best practices, from Pierce etc.'s post

Every target should be a file (use .PHONY sparingly)
File (non-phony) targets should only depend on file targets
Phony targets should have no commands, only dependencies. This doesn't work for make clean, but otherwise it's a good way to group sub-targets under a single target.

Recipes

Using | and $| to skip existing files:

%.min.js: | %.js
	ng-annotate -a $| | closure-compiler --language_in ECMASCRIPT5 --warning_level QUIET > $@

favicon.ico

Suppose you've designed a logo, and saved it as logo.psd, and want to build a favicon.ico from it. You only have to do this once, really, since logo.psd won't change (often), but it's nice to just stick the process in your Makefile and let make handle it.

all: favicon.ico

.INTERMEDIATE: favicon-16.png favicon-32.png
favicon-%.png: logo.psd
	convert $<[0] -resize $*x$* $@
favicon.ico: favicon-16.png favicon-32.png
	convert $^ $@

In the convert command, filename[0] tells ImageMagick to pull off the composited layer from the original PSD.
The .INTERMEDIATE target tells Make to remove the resized images after they've been composed into favicon.ico.

site.css

For compiling LESS into (nice) CSS.

First, to ensure that your package.json will install the LESS compiler and the clean-css minifier, run the command:
npm install --save-dev clean-css less

BIN := node_modules/.bin

all: site.css

$(BIN)/lessc $(BIN)/cleancss:
	npm install

%.css: %.less $(BIN)/lessc $(BIN)/cleancss
	$(BIN)/lessc $< | $(BIN)/cleancss --keep-line-breaks --skip-advanced >$@

TypeScript declarations

There are TypeScript declaration managers out there, but it's just as easy to do it in Make. The build steps below will:

download all the type declarations listed in the DTS array,
from my DefinitelyTyped fork,
to the directory type_declarations/

DTS := mocha/mocha node/node yargs/yargs

all: type_declarations
type_declarations: $(DTS:%=type_declarations/%.d.ts)

type_declarations/%:
	mkdir -p $(@D)
	curl -s https://raw.githubusercontent.com/chbrown/DefinitelyTyped/master/$* > $@

Bundling JavaScript with Closure Compiler

Declare a list of scripts that will all be in a predictable place, by name:

SCRIPTS = underscore jquery angular ngStorage

Now both minify them, for production, and cat them together, for development, without having to repeat the names:

compiled.min.js: $(SCRIPTS:%=scripts/%.min.js)
	closure-compiler --js $+ > $@
compiled.max.js: $(SCRIPTS:%=scripts/%.js)
	cat $+ > $@