Makefile

# 
# to make it work use the multithreaded version like `make -j4`
# 
BINPATH = ./node_modules/.bin
SRCDIR = src
TARGETDIR = dist
SUBDIRS = $(SRCDIR) $(TARGETDIR) $(BINPATH)
JSSRC = $(shell find $(SRCDIR)/js -type f -name '*.js')
CSSSRC = $(SRCDIR)/css/main.css
JSTARGET = $(TARGETDIR)/app.js
CSSTARGET = $(TARGETDIR)/app.css
BFLAGS = -t babelify -g uglifyify --debug
POSTCSSPLUGINS = -u autoprefixer postcss-import postcss-cssnext

.PHONY: build
build: $(JSTARGET) $(CSSTARGET)

.PHONY: server
server: watch
	@echo 'Starting the webserver'
	$(BINPATH)/browser-sync start --server --files 'dist/*.css, dist/*.js, *.html'

.PHONY: watch
watch: watchjs watchcss | $(SUBDIRS)

.PHONY: watchjs
watchjs:
	@echo 'Watching for changes in *.js files'
	$(BINPATH)/watchify --verbose $(BFLAGS) -o $(JSTARGET) -- $(JSSRC) &

.PHONY: watchcss
watchcss:
	@echo 'Watching for changes in *.css files'
	$(BINPATH)/postcss $(POSTCSSPLUGINS) -o $(CSSTARGET) -w $(SRCDIR)/css $(CSSSRC) &

$(JSTARGET): $(JSSRC) | $(SUBDIRS)
	$(BINPATH)/browserify $(BFLAGS) -o $@ -- $^

$(CSSTARGET): $(CSSSRC) | $(SUBDIRS)
	$(BINPATH)/postcss $(POSTCSSPLUGINS) -o $(CSSTARGET) $(CSSSRC)

$(SUBDIRS):
	@mkdir -p $@

.PHONY: clean
clean:
	-rm -rf $(TARGETDIR)