A Makefile for web developers using babel with webpack or browserify

Makefile

# Makefile for web development with:
# 1. ES6 / Babel compiler
#    setup: npm install babel
# 2. Bundler (Webpack or Browserify)
#    setup: npm install webpack|browserify
# 3. Static Web Server
#    setup: npm install http-server

WEBMAKE = webmake
WEBPACK = webpack
BROWSERIFY = browserify
ENTRY = lib/app.js
OUTPUT = lib/CollateralUtility.js
SRC = $(wildcard src/*.js) $(wildcard src/**/*.js)
LIB = $(SRC:src/%.js=lib/%.js)

UNAME := $(shell uname)
ifeq ($(UNAME),Darwin)
	WAITCOMMAND = fswatch -r -1 src/	
else
	WAITCOMMAND = inotifywait -qre close_write src/
endif

all: build webpack

rebuild: clean build

rebuild-all: clean all

build: $(LIB)

lib/%.js: src/%.js
	mkdir -p $(@D)
	babel -p --stage 0 -m common $< -o $@

clean:
	rm -rf lib;

clean-deps: 
	rm -rf node_modules
	rm -rf vendor

setup:
	npm install babel
	npm install browserify
	npm install webpack
	npm install http-server
	
webpack:
	@$(WEBPACK) $(ENTRY) $(OUTPUT)

browserify:
	@$(BROWSERIFY) $(ENTRY) > $(OUTPUT)

webmake:
	@$(WEBMAKE) $(ENTRY) $(OUTPUT)

serve:
	http-server -p 8000


watch:
	while true; do \
		$(WAITCOMMAND); \
		make $(WATCHMAKE); \
	done