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.
Last active
July 11, 2025 20:15
-
Star
(176)
You must be signed in to star a gist -
Fork
(14)
You must be signed in to fork a gist
-
-
Save toolmantim/6200029 to your computer and use it in GitHub Desktop.
An example of using Make instead of Grunt for fast, simple and maintainable front-end asset compilation.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/* |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "myapp", | |
| "version": "0.0.0", | |
| "devDependencies": { | |
| "nodemon": "x", | |
| "autoprefixer": "x", | |
| "node-sass": "x" | |
| } | |
| } |
I think you have a typo in your example makefile. On line 82 you have
where wach should be watch.
but I should also say thank you for the gist.
great, I'm tired of re-learning js build tools
instead using of $(BIN)/node-sass or a other service you can declare top of your makefile:
export PATH := $(PATH):$(PWD)/node_modules/.bin
then you have you write just node-sass, autoprefixer, etc. :)
Note that adding node_modules/.bin after your default PATH will run globally installed tools instead of the locally installed ones if they are installed in both places.
Make automatically watches files for changes! You can run watch make all to use unix watch to run make every 2 seconds and it will recompile on modification and you won't have to install wach :D
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Awesome use of Make! It's somewhat more difficult to configure, but the advantages are clear.