Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Building frontend stuff with make
# Base dirs
SRC_DIR = src
TMP_DIR = tmp
DEV_DIR = dev
SRC_PUBLIC_DIR := $(SRC_DIR)/public
SRC_STYLES_DIR := $(SRC_DIR)/styles
SRC_SCRIPTS_DIR := $(SRC_DIR)/scripts
TMP_SCRIPTS_DIR := $(TMP_DIR)/scripts
DEV_PUBLIC_DIR := $(DEV_DIR)/public
DEV_STYLES_DIR := $(DEV_DIR)/styles
DEV_SCRIPTS_DIR := $(DEV_DIR)/scripts
# Source files
SRC_PUBLIC_FILES := $(shell find $(SRC_PUBLIC_DIR) -type f -print)
SRC_PUBLIC_DIRS := $(shell find $(SRC_PUBLIC_DIR) -type d -print)
SRC_SCRIPTS_FILES := $(shell find $(SRC_SCRIPTS_DIR) -type f -print)
SRC_SCRIPTS_DIRS := $(shell find $(SRC_SCRIPTS_DIR) -type d -print)
TMP_SCRIPTS_FILES := $(patsubst $(SRC_DIR)/%,$(TMP_DIR)/%,$(SRC_SCRIPTS_FILES))
TMP_SCRIPTS_DIRS := $(patsubst $(SRC_DIR)/%,$(TMP_DIR)/%,$(SRC_SCRIPTS_DIRS))
DEV_PUBLIC_FILES := $(patsubst $(SRC_PUBLIC_DIR)/%,$(DEV_DIR)/%,$(SRC_PUBLIC_FILES))
DEV_PUBLIC_DIRS := $(patsubst $(SRC_PUBLIC_DIR)/%,$(DEV_DIR)/%,$(SRC_PUBLIC_DIRS))
DEV_STYLES_FILES := $(DEV_STYLES_DIR)/app.css
DEV_SCRIPTS_FILES := $(DEV_SCRIPTS_DIR)/app.js $(DEV_SCRIPTS_DIR)/common.js
DEV_SCRIPTS_DIRS := $(patsubst $(SRC_DIR)/%,$(DEV_DIR)/%,$(SRC_SCRIPTS_DIRS))
MODULES := react react-router react/addons reflux superagent moment
export NODE_PATH := $(NODE_PATH):$(TMP_SCRIPTS_DIR)
export NODE_ENV ?= development
export SERVER_ADDRESS ?= localhost:3000
export PORT ?= 4200
.PHONY: all install serve watch test test-unit test-feature clean depclean cleanall
all: install serve
install: node_modules
node_modules: package.json
npm install
touch node_modules
dev: $(DEV_PUBLIC_FILES) $(DEV_STYLES_FILES) $(DEV_SCRIPTS_FILES)
touch reload
touch dev/.block && rm dev/.block
$(DEV_DIR)/%: $(SRC_PUBLIC_DIR)/% | $(DEV_PUBLIC_DIRS)
cp $< $@
$(DEV_STYLES_DIR)/%.css: $(SRC_STYLES_DIR)/%.scss | $(DEV_STYLES_DIRS) dev/.block
./node_modules/.bin/node-sass \
--include-path node_modules \
--output $(@D) \
$<
$(DEV_SCRIPTS_DIR)/common.js: node_modules | $(DEV_SCRIPTS_DIRS) dev/.block
./node_modules/.bin/browserify \
--outfile $@ \
--insert-globals \
$(foreach module,$(MODULES),--require $(module))
$(DEV_SCRIPTS_DIR)/app.js: $(TMP_SCRIPTS_FILES) | $(DEV_SCRIPTS_DIRS) dev/.block
./node_modules/.bin/browserify \
--entry $(TMP_SCRIPTS_DIR)/app.jsx \
--outfile $@ \
--insert-globals \
--extension .jsx \
$(foreach module,$(MODULES),--external $(module))
.SECONDARY: $(TMP_SCRIPTS_DIR)/%
$(TMP_SCRIPTS_DIR)/%: $(SRC_SCRIPTS_DIR)/% | $(TMP_SCRIPTS_DIRS) dev/.block
./node_modules/.bin/babel \
$< \
--out-file $@ \
--optional utility.inlineEnvironmentVariables
$(TMP_SCRIPTS_DIRS) $(DEV_PUBLIC_DIRS) $(DEV_STYLES_DIRS) $(DEV_SCRIPTS_DIRS):
mkdir -p $@
serve: dev node_modules
./node_modules/.bin/pushstate-server dev $(PORT)
.INTERMEDIATE: dev/.block
dev/.block:
touch dev/.block
watch: install dev
fswatch \
--print0 \
--recursive \
--latency 0.5 \
src | \
xargs -0 -n 1 -I {} make dev
test-unit: export NODE_PATH := $(SRC_SCRIPTS_DIR)
test-unit: export NODE_ENV ?= test
test-unit: export PHANTOMJS_BIN ?= /usr/local/bin/phantomjs
test: test-unit
test-unit:
./node_modules/karma/bin/karma start --single-run
clean:
rm -rfv tmp dev
depclean:
rm -rfv node_modules
cleanall: clean depclean
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment