Using Makefile to minify and switch between minified and non-minified CSS and JavaScript

.gitignore

*.min.*
foo.css
foo.js
bar.css
bar.js
foobar.*

README.md

Using Makefile to minify and switch between minified and non-minified CSS and JavaScript

An example/template, read my blog post for explanation.

The content in this Gist is placed in Public Domain.

bar.dev.css

.b {
  color: #bbb;
}

bar.dev.js

var b = 'b';

foo.dev.css

.a {
  color: #aaa;
}

foo.dev.js

var a = 'a';

Makefile

# Public Domain
# Author: Yu-Jie Lin
# Web   : http://yjl.im
# Gist  : https://gist.github.com/livibetter/5108128
# Blog  : http://blog.yjl.im/2013/03/using-makefile-to-minify-and-switch.html

all: min

dev min clean:
# for sub-directory, use:
#   make -C dir $@
	make -f Makefile.CSS $@
	make -f Makefile.JS $@

.PHONY: all clean dev min

Makefile.CSS

# Public Domain
# Author: Yu-Jie Lin
# Web   : http://yjl.im
# Gist  : https://gist.github.com/livibetter/5108128
# Blog  : http://blog.yjl.im/2013/03/using-makefile-to-minify-and-switch.html

TARGETS = foo bar
TARGETS_ALL = $(TARGETS) foobar

YUI_URI = http://refresh-sf.com/yui/

all: min

foobar.%.css: $(addsuffix .%.css,$(TARGETS))
	cat $^ > $@

%.min.css: %.dev.css
	curl -L -F type=CSS -F redirect=1 -F 'compressfile[]=@$<; filename=$<' -o $@ $(YUI_URI)

dev: $(addsuffix .dev.css,$(TARGETS_ALL)) dev_symlink
min: $(addsuffix .min.css,$(TARGETS_ALL)) min_symlink

dev_symlink: $(addsuffix .dev,$(TARGETS_ALL))
min_symlink: $(addsuffix .min,$(TARGETS_ALL))

%.dev %.min:
	@if [ "`readlink $*.css`" != "$@.css" ]; then\
		rm -f $*.css ;\
		ln -v -s $@.css $*.css ;\
	fi

clean:
	rm -f $(addsuffix .css,$(TARGETS_ALL))
	rm -f $(addsuffix .min.css,$(TARGETS_ALL))
	rm -f foobar.dev.css

.PHONY: all clean dev_symlink min_symlink

Makefile.JS

# Public Domain
# Author: Yu-Jie Lin
# Web   : http://yjl.im
# Gist  : https://gist.github.com/livibetter/5108128
# Blog  : http://blog.yjl.im/2013/03/using-makefile-to-minify-and-switch.html

TARGETS = foo bar
TARGETS_ALL = $(TARGETS) foobar

CLOSURE_URI = http://closure-compiler.appspot.com/compile

all: min

foobar.%.js: $(addsuffix .%.js,$(TARGETS))
	cat $^ > $@

%.min.js: %.dev.js
	curl --data output_info=compiled_code --data-urlencode js_code@$< $(CLOSURE_URI) > $@

dev: $(addsuffix .dev.js,$(TARGETS_ALL)) dev_symlink
min: $(addsuffix .min.js,$(TARGETS_ALL)) min_symlink

dev_symlink: $(addsuffix .dev,$(TARGETS_ALL))
min_symlink: $(addsuffix .min,$(TARGETS_ALL))

%.dev %.min:
	@if [ "`readlink $*.js`" != "$@.js" ]; then\
		rm -f $*.js ;\
		ln -v -s $@.js $*.js ;\
	fi

clean:
	rm -f $(addsuffix .js,$(TARGETS_ALL))
	rm -f $(addsuffix .min.js,$(TARGETS_ALL))
	rm -f foobar.dev.js

.PHONY: all clean dev_symlink min_symlink