I still remember how confused I was several years ago, when I was first introduced to Makefiles. Together with the Make utility, we can compile & build software from its source files. Back in university, this was a necessary tool in several classes, specially the ones dealing with C or C++. As soon as I left these languages behind and moved towards Java, Python and JavaScript, I lost contact with all this mess… until a few months ago, when a friend of mine started writing his own.

Funny enough, looking at his makefiles didn’t look confusing anymore. Actually, everything looked quite… logic and organised. I started looking at makefiles as good ways to keep common commands (some rather complex and/or long) organised and in a single place, easily invoked and catalogued. They started to look a good alternative to stop going though my terminal command history (using ctrl+r) to find the right command(s) to run and start putting them in a single place. A place where I could give simple & memorable aliases to long, boring & complex commands, and run those commands using the newly created aliases.

Concerning web development (mostly front-end), if you’re already using Grunt, Gulp, Broccoli or npm scripts, you might not need this. But I’ve already found myself in situations where my projects had little or none dependencies, like SCSScandinavian Flags. This project is (S)CSS-only, so the only real dependency is Sass. If you already played around with Sass, you know how long the commands can get; but, more than long, this is something I 1) don’t want to keep in mind all the time and 2) don’t want to browser around my terminal command history looking for the right commands every time I want to compile or watch my SCSS files.

The best way I’ve found to fix this was to write a Makefile for this project:

build:
	sass scss/main.scss:dist/flags.css --style compressed

watch:
	sass --watch scss/main.scss:dist/flags.css --style compressed

test:
	make
	open "test/index.html"
	make watch

clean:
	rm -rf dist/ .sass-cache/

# More info about this hack:
# http://chrisadams.me.uk/2012/10/21/understanding-make/
.PHONY: test

Let’s analyse each block:

build

Simple command where I define the source:destination of the SCSS-to-CSS compilation. The --style flag defines the CSS output style.

watch

Much like the build rule, but I want to recompile the CSS every time my Sass files change.

test

This one is just a personal shortcut, to automatically open the browser on a test page I created. It’s very useful while debugging.

clean

Cleans compiled CSS files (which can always be created by compiling the Sass files) and Sass’ cache.

So next time you’re tempted to grab Grunt, Gulp, or any other modern day task runner, remember Unix’s tools and its old, time-tested wisdom.