This gist accompanies https://github.com/pwenzel/fswatch-makefile.
It shows how one might build a tiny build system for a website using a Makefile.
Last active
February 20, 2020 13:56
-
-
Save pwenzel/8847882 to your computer and use it in GitHub Desktop.
This gist accompanies https://github.com/pwenzel/fswatch-makefile. It shows how one might build a tiny build system for a website using a Makefile.
This file contains 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
| # Example Makefile for compiling CSS and Javascript in watched folder | |
| PHONY: optimize | |
| css: | |
| @cat assets/css/normalize.css assets/css/app.css > public/assets/all.css | |
| @echo Built all.css | |
| js: | |
| @cat assets/js/jquery.js assets/js/jquery.cookie.js assets/js/app.js > public/assets/all.js | |
| @echo Built all.js | |
| watch: | |
| @echo Watching for changes... | |
| @fswatch assets/css:assets/js "echo changed && make css js" | |
| optimize: css js | |
| @yuicompressor assets/all.css -o assets/all.css | |
| @yuicompressor assets/all.js -o assets/all.js | |
| @echo Optimized all.js |
This file contains 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
| # Example Makefile for compiling Javascript in watched folder | |
| PHONY: optimize | |
| js: | |
| @cat assets/js/jquery.js assets/js/jquery.cookie.js assets/js/app.js > public/assets/all.js | |
| @echo Built all.js | |
| watch: | |
| @echo Watching for changes... | |
| @fswatch assets/js "echo changed && make js" | |
| optimize: css js | |
| @yuicompressor assets/all.js -o assets/all.js | |
| @echo Optimized all.js |
This file contains 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
| # Example Makefile for compiling CSS in watched folder | |
| PHONY: optimize | |
| css: | |
| @cat assets/css/normalize.css assets/css/app.css > public/assets/all.css | |
| @echo Built all.css | |
| watch: | |
| @echo Watching for changes... | |
| @fswatch assets/css "echo changed && make css" | |
| optimize: css js | |
| @yuicompressor assets/all.css -o assets/all.css | |
| @echo Optimized all.js |
This file contains 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
| # Kitchen Sink Makefile for compiling CSS and Javascript in watched folder | |
| # Uses variable lists for folks who like complexity | |
| # Creates a version file in your project for asset versioning | |
| PHONY: css js version | |
| cssfiles = 'assets/css/normalize.css' 'assets/app.css' | |
| jsfiles = 'assets/js/jquery.js' 'assets/js/jquery.cookie.js' 'assets/app.js' | |
| css: $(cssfiles) | |
| @echo Built all.css | |
| js: $(jsfiles) | |
| @echo Built all.js | |
| $(cssfiles): | |
| @cat $@ >> assets/all.css | |
| $(jsfiles): | |
| @cat $@ >> assets/all.js | |
| watch: | |
| @echo Watching for changes... | |
| @fswatch assets/css:assets/js "echo changed && make clean && make" | |
| optimize: css js version | |
| @yuicompressor assets/all.css -o assets/all.css | |
| @yuicompressor assets/all.js -o assets/all.js | |
| @echo Optimized | |
| version: | |
| @echo `date +%s` > version | |
| clean: | |
| @rm -f assets/all.css assets/all.js version |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment