toolmantim · July 11, 2025 20:15 · Mar 27, 2014 · Aug 13, 2013 · Aug 13, 2013 · Aug 13, 2013
diff --git a/Makefile b/Makefile
@@ -64,6 +64,12 @@ DIST=public
 # If something isn't re-compiling double-check the changed file is in the
 # target's dependencies list.
 
+# Phony targets - these are for when the target-side of a definition
+# (such as "all" below) isn't a file but instead a just label. Declaring
+# it as phony ensures that it always run, even if a file by the same name
+# exists.
+.PHONY : all clean watch
+
 # Compile the final targets
 all: $(DIST)/$(APP).css $(DIST)/$(APP).js
 

diff --git a/Readme.md b/Readme.md
@@ -6,7 +6,7 @@ Give it a go:
     node_modules/.bin/bower install
     mkdir -p javascripts sass public
     echo 'console.log("Hello world");' > javascripts/myapp.js
-    echo 'html { background: greenyellow; }' > sass/myapp.scss
+    echo 'html { background: papayawhip; }' > sass/myapp.scss
     make
 
 And then look in `public` to see your compiled files.

diff --git a/Readme.md b/Readme.md
@@ -6,7 +6,7 @@ Give it a go:
     node_modules/.bin/bower install
     mkdir -p javascripts sass public
     echo 'console.log("Hello world");' > javascripts/myapp.js
-    echo 'html { background: greenpapayawhip; }' > sass/myapp.scss
+    echo 'html { background: greenyellow; }' > sass/myapp.scss
     make
 
 And then look in `public` to see your compiled files.

diff --git a/Makefile b/Makefile
@@ -44,7 +44,7 @@
 # Variables
 
 APP=myapp
-APP_JS_SOURCES=$(BOWER)/angular/angular.js $(JS)/signoff.js
+APP_JS_SOURCES=$(BOWER)/angular/angular.js $(JS)/$(APP).js
 AUTOPREFIXER_BROWSERS="> 1%"
 
 SASS=sass
@@ -69,17 +69,17 @@ all: $(DIST)/$(APP).css $(DIST)/$(APP).js
 
 # Destroy the final targets
 clean:
-  rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
+	rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
 
 # Watch the filesystem and recompile on file modification
 watch:
-  $(BIN)/wach -o "$(JS)/**/*,$(SASS)/**/*" make all
+	$(BIN)/wach -o "$(JS)/**/*,$(SASS)/**/*" make all
 
 # The final CSS file
 $(DIST)/$(APP).css: $(SASS)/**
-  $(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
-  $(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
+	$(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
+	$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
 
 # The final JS file
 $(DIST)/$(APP).js: $(APP_JS_SOURCES)
-  cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
+	cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
diff --git a/Readme.md b/Readme.md
@@ -6,7 +6,7 @@ Give it a go:
     node_modules/.bin/bower install
     mkdir -p javascripts sass public
     echo 'console.log("Hello world");' > javascripts/myapp.js
-    echo 'html { background: papayawhip; }' > sass/myapp.scss
+    echo 'html { background: greenpapayawhip; }' > sass/myapp.scss
     make
 
 And then look in `public` to see your compiled files.

diff --git a/Readme.md b/Readme.md
@@ -1,10 +1,14 @@
 Give it a go:
 
+    git clone https://gist.github.com/6200029.git make-asset-compilation
+    cd make-asset-compilation
     npm install
     node_modules/.bin/bower install
     mkdir -p javascripts sass public
     echo 'console.log("Hello world");' > javascripts/myapp.js
     echo 'html { background: papayawhip; }' > sass/myapp.scss
-    make watch
+    make
 
-And then look in `public` to see your compiled files.
+And then look in `public` to see your compiled files.
+
+To watch it auto-recompile on file change, run `make watch` and then edit `javascripts/myapp.js` or `sass/myapp.scss`
diff --git a/Makefile b/Makefile
@@ -1,4 +1,49 @@
-APP=signoff
+# 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
+
+APP=myapp
 APP_JS_SOURCES=$(BOWER)/angular/angular.js $(JS)/signoff.js
 AUTOPREFIXER_BROWSERS="> 1%"
 
@@ -9,17 +54,32 @@ BIN=node_modules/.bin
 BOWER=bower_components
 DIST=public
 
+# 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.
+
+# Compile the final targets
 all: $(DIST)/$(APP).css $(DIST)/$(APP).js
 
+# Destroy the final targets
 clean:
-	rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
+  rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
 
+# Watch the filesystem and recompile on file modification
 watch:
-	$(BIN)/wach -o "$(JS)/*,$(SASS)/*" make all
+  $(BIN)/wach -o "$(JS)/**/*,$(SASS)/**/*" make all
 
-$(DIST)/$(APP).css: $(SASS)/$(APP).scss
-	$(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
-	$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
+# The final CSS file
+$(DIST)/$(APP).css: $(SASS)/**
+  $(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
+  $(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
 
+# The final JS file
 $(DIST)/$(APP).js: $(APP_JS_SOURCES)
-	cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
+  cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
diff --git a/Makefile b/Makefile
@@ -1,24 +1,25 @@
-APP=myapp
+APP=signoff
 APP_JS_SOURCES=$(BOWER)/angular/angular.js $(JS)/signoff.js
 AUTOPREFIXER_BROWSERS="> 1%"
 
+SASS=sass
+JS=javascripts
+
 BIN=node_modules/.bin
 BOWER=bower_components
 DIST=public
-SASS=sass
-JS=javascripts
 
 all: $(DIST)/$(APP).css $(DIST)/$(APP).js
 
-$(DIST)/$(APP).css:
-	$(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
-	$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
-
-$(DIST)/$(APP).js:
-	cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
-
 clean:
 	rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
 
 watch:
-	$(BIN)/nodemon --watch sass --watch javascripts --delay .25 --exec make clean all sass/*
+	$(BIN)/wach -o "$(JS)/*,$(SASS)/*" make all
+
+$(DIST)/$(APP).css: $(SASS)/$(APP).scss
+	$(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
+	$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
+
+$(DIST)/$(APP).js: $(APP_JS_SOURCES)
+	cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
diff --git a/Readme.md b/Readme.md
@@ -1,4 +1,4 @@
-Example usage:
+Give it a go:
 
     npm install
     node_modules/.bin/bower install

diff --git a/package.json b/package.json
@@ -2,8 +2,8 @@
   "name": "myapp",
   "devDependencies": {
     "bower": "x",
-    "nodemon": "x",
     "autoprefixer": "x",
-    "node-sass": "x"
+    "node-sass": "x",
+    "wach": "x"
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "myapp",
   "devDependencies": {
+    "bower": "x",
     "nodemon": "x",
     "autoprefixer": "x",
     "node-sass": "x"

diff --git a/Readme.md b/Readme.md
@@ -1,6 +1,7 @@
 Example usage:
 
     npm install
+    node_modules/.bin/bower install
     mkdir -p javascripts sass public
     echo 'console.log("Hello world");' > javascripts/myapp.js
     echo 'html { background: papayawhip; }' > sass/myapp.scss

diff --git a/bower.json b/bower.json
@@ -0,0 +1,6 @@
+{
+  "name": "myapp",
+  "dependencies": {
+    "angular": "x"
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "myapp",
-  "version": "0.0.0",
   "devDependencies": {
     "nodemon": "x",
     "autoprefixer": "x",

diff --git a/Makefile b/Makefile
@@ -11,7 +11,7 @@ JS=javascripts
 all: $(DIST)/$(APP).css $(DIST)/$(APP).js
 
 $(DIST)/$(APP).css:
-  $(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
+	$(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
 	$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
 
 $(DIST)/$(APP).js:
@@ -21,4 +21,4 @@ clean:
 	rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
 
 watch:
-	$(BIN)/nodemon --watch sass --watch javascripts --delay .25 --exec make clean all sass/*
+	$(BIN)/nodemon --watch sass --watch javascripts --delay .25 --exec make clean all sass/*
diff --git a/Makefile b/Makefile
@@ -0,0 +1,24 @@
+APP=myapp
+APP_JS_SOURCES=$(BOWER)/angular/angular.js $(JS)/signoff.js
+AUTOPREFIXER_BROWSERS="> 1%"
+
+BIN=node_modules/.bin
+BOWER=bower_components
+DIST=public
+SASS=sass
+JS=javascripts
+
+all: $(DIST)/$(APP).css $(DIST)/$(APP).js
+
+$(DIST)/$(APP).css:
+  $(BIN)/node-sass $(SASS)/$(APP).scss $(DIST)/$(APP).css
+	$(BIN)/autoprefixer --browsers $(AUTOPREFIXER_BROWSERS) $(DIST)/$(APP).css
+
+$(DIST)/$(APP).js:
+	cat $(APP_JS_SOURCES) > $(DIST)/$(APP).js
+
+clean:
+	rm -f $(DIST)/$(APP).css $(DIST)/$(APP).js
+
+watch:
+	$(BIN)/nodemon --watch sass --watch javascripts --delay .25 --exec make clean all sass/*
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,9 @@
+Example usage:
+
+    npm install
+    mkdir -p javascripts sass public
+    echo 'console.log("Hello world");' > javascripts/myapp.js
+    echo 'html { background: papayawhip; }' > sass/myapp.scss
+    make watch
+
+And then look in `public` to see your compiled files.
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "myapp",
+  "version": "0.0.0",
+  "devDependencies": {
+    "nodemon": "x",
+    "autoprefixer": "x",
+    "node-sass": "x"
+  }
+}