A collection of no frills Makefiles for JS building, CSS building, and deployments

README-Makefiles.md

You can combine all these makefiles into one, or, use a master Makefile that calls these.

For auto building you can use watch or if your editor supports build tools call the makefiles on save.

css.mk

# Super simple LESS to CSS builder
# Requirements: nodejs, npm
# Usage:
#	- make (this will build the css file)
#	- make main_css (this does the same as above, but specifies exact target)
#	- make alt_css (this builds the alternate css file)
#	- make all_css (this runs both main_css and alt_css)

# location expected for lessc bin file
LESSC = /usr/local/bin/lessc


MAIN_CSS = main.css
MAIN_LESS = path/to/main.less
# The following line gets all the dependencies from the targeted LESS file
# and generates a make target for you
MAIN_LESS_TARGET = $(shell lessc $(MAIN_LESS) -M $(MAIN_CSS))

.PHONY: main_css
main_css: $(MAIN_CSS) $(LESSC)
$(MAIN_LESS_TARGET)
	lessc $(MAIN_LESS) > $(MAIN_LESS)

ALT_CSS = alt.css
ALT_LESS = path/to/alt.less
# The following line gets all the dependencies from the targeted LESS file
# and generates a make target for you
ALT_LESS_TARGET = $(shell lessc $(ALT_LESS) -M $(ALT_CSS))

.PHONY: alt_css
alt_css: $(ALT_CSS) $(LESSC)
$(ALT_LESS_TARGET)
	lessc $(ALT_LESS) > $(ALT_LESS)

.PHONY: all_css
all_css: main_css alt_css


# -------------------------
# Handle bin dependencies  |
# -------------------------

# This will install lessc if it's not currently on the system.
$(LESSC):
	npm install -g less

deploy.mk

# No frills deployment
# Requirements: rsync
# Usage:
#	- make or make deploy


.PHONY: deploy
deploy:
	rsync -a --delete ./ username@hostname:/path/to/web/root
 

js.mk

# Super simple JS builder
# Requirements: browserify, uglifyjs
# Usage:
#	- make	(this will build the js file)
#	- make min (this will minify the JS file)
#	- make touch (updates the time stamp of the JS source file, useless really)
#	- make touch js (forces a build of JS, useful for unminifying builds)

# location expected for browserify bin file
BROWSERIFY = /usr/local/bin/browserify

# location expected for uglifyjs
UGLIFYJS = /usr/local/bin/uglifyjs

# path to output file (the file you'll link to in your HTML)
JS = app/main.js

# path to file that contains your base 'require("somefile.js");'
JS_SRC = app/main.src.js

# command that reads the above file to get the dependency list
# this way the build will only happen IF a required file has been changed
# since your last build
JS_DEPS = $(shell browserify --list $(JS_SRC))

js: $(JS)

min: $(JS) $(UGLIFYJS)
	uglifyjs $(JS) -o $(JS)

touch:
	touch $(JS_SRC)

$(JS): $(JS_DEPS) $(BROWSERIFY)
	@echo ''
	@echo '----------------------'
	@echo 'Building JS files'
	@echo '----------------------'
	@# tr " " "\n"  (this is used to list the JS files on new lines)
	@echo $(JS_DEPS) | tr " " "\n"
	@echo '======================'
	@echo ''
	browserify $(JS_SRC) -o $(JS)

.PHONY: js min touch


# -------------------------
# Handle bin dependencies  |
# -------------------------

# This will install browserify if it's not currently on the system
$(BROWSERIFY):
	npm install -g browserify

# This will install uglifyjs if it's not currently on the system
$(UGLIFYJS):
	npm install -g uglify-js