Skip to content

Instantly share code, notes, and snippets.

@joho
Forked from toolmantim/Makefile
Last active December 27, 2015 08:39
Show Gist options
  • Save joho/7297517 to your computer and use it in GitHub Desktop.
Save joho/7297517 to your computer and use it in GitHub Desktop.
# A simple Makefile alternative to using Grunt for your static asset compilation
#
## Usage
#
# $ npm install
#
# And then you can run various commands:
#
# $ make # compile files that need compiling
# $ make clean all # remove target files and recompile from scratch
# $ make watch # watch the filesystem for changes and recompile
#
## Why?
#
# 1. Less dependencies
#
# Instead of needing a grunt-* wrapper library for your favourite tool, and
# needing to update or wait for a new version just to pass a new option into
# the underlying library, you can simply use the library directly.
#
# Thankfully all the awesome node libraries you're using with Grunt include
# command-line tools which are easily executable by make.
#
# 2. Easy to extend
#
# For this example we're using some linux commands for concating, and various
# node-based libraries for Sass compilation, CSS prefixing, etc.
#
# Adding a new tool or step to your asset compilation is dead simple:
#
# 1. add the library to package.json
# 2. npm install
# 3. add a new line to the revelant target, calling the binary created by npm
# install
#
# 3. Performance
#
# Makefile understands file modification times, so it won't recompile any
# targets whose source dependencies haven't changed. Combined with using a
# file modification monitoring tool like wach, you get near-instant recompiles
# of your front-end assets.
# Variables
JS_SOURCES=$(BOWER)/modernizr/modernizr.js $(BOWER)/angular/angular.js $(BOWER)/blueimp-canvas-to-blob/js/canvas-to-blob.js $(BOWER)/bespoke.js/src/bespoke.js $(BOWER)/raphael/raphael.js $(BOWER)/jquery/jquery.js $(wildcard $(JS)/*.js $(JS)/*/*.js)
JS=views/js
SASS=views/stylesheets
BIN=node_modules/.bin
BOWER=bower_components
DIST=public
STYLESHEETS=$(subst ${SASS},${DIST}/stylesheets,$(patsubst %.scss,%.css,$(wildcard $(SASS)/[^_]*.scss)))
AUTOPREFIXER_BROWSERS="> 1%"
# Targets
#
# The format goes:
#
# target: list of dependencies
# commands to build target
#
# If something isn't re-compiling double-check the changed file is in the
# target's dependencies list.
# Destroy the final targets
clean:
rm -f $(DIST)/stylesheets/*.css
rm -f $(DIST)/js/*.js
rm -f web
# Compile the final targets
all: assets go
assets: $(STYLESHEETS) $(DIST)/js/app.js
go:
go build web.go
run: all
./web
# Watch the filesystem and recompile on file modification
watch:
$(BIN)/wachs -o "$(SASS)/**/*.scss,**/*.go,$(JS)/**/*.js" "make run"
# The final CSS files
$(DIST)/stylesheets/%.css: $(wildcard $(SASS)/*.scss) $(wildcard $(SASS)/**/*.scss)
$(BIN)/node-sass $(subst ${DIST}/stylesheets,${SASS},$(patsubst %.css,%.scss,$@)) $@
$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $@
$(DIST)/js/app.js: $(JS_SOURCES)
cat $(JS_SOURCES) > $(DIST)/js/app.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment