Makefile: webpack, babel, stylus, eslint

Makefile

### Makefile to be used when compiling assets for Event Manager
### Based on ideas from https://github.com/acdlite/the-react-way/blob/master/Makefile
###
### Requirements/assumptions of this Makefile:
### JS
###   - webpack (include json and css loaders to webpack cofig just in case)
###   - babel
###   - eslint (eslint-plugin-react if you want more lints of your react code)
###   - eslint-watch (broken until 2.0.0: https://github.com/rizowski/eslint-watch/issues/8)
### CSS
###   - stylus
###
### --------------------------------
###    AVAILABLE TARGETS
### --------------------------------
###

.PHONY: help
.PHONY: deps build build-dev
.PHONY: webpack webpack-watch
.PHONY: js js-fast js-watch
.PHONY: css
#.PHONY: eslint
.PHONY: clean js-clean css-clean node-clean
.PHONY: test test-coverage test-watch test-jenkins

BABEL_CMD = node_modules/.bin/babel
ESLINT_CMD = node_modules/.bin/eslint
WEBPACK_CMD = node_modules/.bin/webpack
STYLUS_CMD = node_modules/.bin/stylus
ESLINT_CMD = node_modules/.bin/eslint
# JS Test Runner
TEST_RUNNER_CMD = ./node_modules/.bin/_mocha
COVER_RUNNER_CMD = ./node_modules/.bin/babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha --

# NOTE: You might want to remove the blacklist entirely and add --optional runtime
BABEL_ARGS = --source-maps-inline --blacklist regenerator,es6.blockScoping --optional asyncToGenerator --compact false
WEBPACK_ARGS = --config webpack.config.js --progress --colors --display-error-details
STYLUS_ARGS = -I css/css
ESLINT_ARGS = --config eslint.config.json

TEST_RUNNER_ARGS0 = --compilers js:babel/register -c --opts mocha.opts --recursive
TEST_FILES ?= js/tests
TEST_RUNNER_ARGS = $(TEST_RUNNER_ARGS0) $(TEST_FILES)

SRC_JS = $(shell find js/app -name "*.js")
LIB_JS = $(patsubst js/app/%.js,.build/app/%.js,$(SRC_JS))

SRC_STYL = $(wildcard css/css/*.styl)
CSS = $(SRC_STYL:.styl=.css)

SRC_TEST_JS = $(shell find js/tests -name "*.js")
LIB_TEST_JS = $(patsubst js/tests/%.js,.build/tests/%.js,$(SRC_JS))


all: clean deps build  ## Build all. Invokes clean, deps, build

deps:                 ## Install all required dependencies
	npm install --loglevel=error

# Build application
# TODO: Add eslint target
build: js webpack css ## Build and bundle all assets. Invokes js, webpack, css.
	-rm -rf ./build

# TODO: Add eslint target
build-dev: dev-deps js-fast webpack     ## Dev build and bundle all assets. Invokes js-fast, webpack

# Pack .js using webpack
# TODO: pack CSS as well
webpack: $(LIB_JS)             ## Bundle .js files (from the ./build dir)
	$(WEBPACK_CMD) $(WEBPACK_ARGS) --bail

webpack-watch: $(LIB_JS)       ## Watch ./build dir and rebundle on change
	$(WEBPACK_CMD) $(WEBPACK_ARGS) --watch

# Transpile JavaScript using Babel
js: $(LIB_JS)                  ## Transpile .js files

js-fast:                       ## Fast transpile .js files
	$(BABEL_CMD) js/app -d .build/app $(BABEL_ARGS)

js-watch:                      ## Watch .js files for changes and re-transpile them on change
	$(BABEL_CMD) js/app -d .build/app $(BABEL_ARGS) -w

# Compile .styl to CSS
css: css-clean $(CSS)          ## Compile and bundle .css and .styl files

# Lint Javascript
eslint: $(SRC_JS)              ## Run ESLint on .js files
	$(ESLINT_CMD) $(ESLINT_ARGS) $^

# BROKEN UNTIL 2.0.0 https://github.com/rizowski/eslint-watch/issues/8
#eslint-watch:
#	$(ESLINT_CMD) $(ESLINT_ARGS) -w /js/app/route_handlers/_misc_reusables/ImageUpload.js

# Clean
clean: node-clean js-clean css-clean  ## Clean-up workspace. Invokes js-clean, css-clean, node-clean

js-clean:  ## Remove ./build/ and js/dist
	-rm -rf .build/app
	-rm -rf js/dist

css-clean:  ## Remove css/compiled/css.css
	-rm css/compiled/css.css

node-clean:  ## Remove node_modules
	-rm -rf node_modules

test:              ## Run tests. All test targets can be run as `make TEST_FILES=/path/to/test test`
	$(TEST_RUNNER_CMD) $(TEST_RUNNER_ARGS)

test-cover:              ## Run tests, generate coverage information and reports
	$(COVER_RUNNER_CMD) $(TEST_RUNNER_ARGS)

test-watch:              ## Run tests when something changes
	$(TEST_RUNNER_CMD) -w $(TEST_RUNNER_ARGS)

test-jenkins:              ## Run as `JUNIT_REPORT_PATH=report.xml JUNIT_REPORT_STACK=1 make test-jenkins`
	$(TEST_RUNNER_CMD) --reporter mocha-jenkins-reporter $(TEST_RUNNER_ARGS) || true

# Dependencies of the targets above
$(LIB_JS): .build/app/%.js: js/app/%.js
	mkdir -p $(dir $@) && $(BABEL_CMD) $< -o $@ $(BABEL_ARGS)

%.css: %.styl
	$(STYLUS_CMD) $(STYLUS_ARGS) < $< >> css/compiled/css.css

help: ## This help dialog.
	@IFS=$$'\n' ; \
	intro_lines=(`fgrep -h "###" $(MAKEFILE_LIST) | fgrep -v fgrep | sed -e 's/###//'`); \
	for line in $${intro_lines[@]}; do \
		printf "%s\n" $$line; \
	done; \
	help_lines=(`fgrep -h -e "##" $(MAKEFILE_LIST) | fgrep -v "###" | fgrep -v fgrep | sed -e 's/\\$$//' | sed -e 's/##/:/'`); \
	for help_line in $${help_lines[@]}; do \
		IFS=$$':' ; \
		help_split=($$help_line) ; \
		help_command=`echo $${help_split[0]} | sed -e 's/^ *//' -e 's/ *$$//'` ; \
		help_info=`echo $${help_split[2]} | sed -e 's/^ *//' -e 's/ *$$//'` ; \
		printf '\033[36m'; \
		printf "%-30s %s" $$help_command ; \
		printf '\033[0m'; \
		printf "%s\n" $$help_info; \
	done