Frontend Development with Makefile

README.md

Makefiles vs. Grunt/Gulp

The above is meant to demonstrate why Makefiles can be just as powerful (if not more) than Grunt/Gulp for frontend development.

The beauty of node.js is that the Unix philosophy is at its core. While Grunt/Gulp practice this philosophy with small cores and an extendable plugin system, the amount of boilerplate and glue code needed to wrap common CLI tools adds too much maintenance and complexity to a build system. Bash and Makefiles can be intimidating to learn at first, but once learned can be a powerful utility belt that can solve nearly any problem and Just Work™.

Usage

First copy the above Makefile to the root of your project and save as "Makefile". If you don't have watch(1) installed:

$ git clone https://github.com/tj/watch.git /tmp
$ cd /tmp/watch
$ make install
or
$ sudo make install

Then simply run:

$ npm install --save-dev {{list deps here}}
$ make develop

Makefile

#==========================================================
#  Environment/Configuration
#==========================================================

# For project consistency, its better to depend on npm binaries loaded locally than 
# globally, so we add .node_modules/.bin to the path for shorthand references. This
# means you should add any binaries you need to "devDependencies" in package.json.
export PATH := ./node_modules/.bin/:$(PATH)

# Pull in the name and version from package.json. The name will default to "app" if not set.
NAME            = $(shell node -e "console.log(require('./package.json').name || 'app');")
VERSION         = $(shell node -e "console.log(require('./package.json').version);")

# Base directories
BUILD_DIR       = build
DIST_DIR        = dist
SRC_DIR         = src
LIVERELOAD_DIR  = $(BUILD_DIR)

# Browserify
JS_SRC          = $(SRC_DIR)
JS_ENTRY        = $(JS_SRC)/app.js
JS_BUNDLE       = $(BUILD_DIR)/$(NAME).js
JS_DIST         = $(DIST_DIR)/$(NAME).js
BROWSERIFY_OPTS = -t brfs --full-path=false
SCRIPTS         = $(shell find $(JS_SRC) -type f -name '*.js')

# LESS
CSS_SRC         = $(SRC_DIR)/styles
CSS_ENTRY       = $(CSS_SRC)/main.less
CSS_BUNDLE      = $(BUILD_DIR)/$(NAME).css
STYLES          = $(shell find $(CSS_SRC) -type f -name '*.less')

# Tests
TEST_SRC        = test/specs
TEST_BUNDLE     = $(BUILD_DIR)/$(NAME).tests.js
TESTS           = $(shell find $(TEST_SRC) -type f -name '*.test.js')

#==========================================================
#  Phony targets
#==========================================================

.PHONY: publish clean develop test

#==========================================================
#  Tasks
#==========================================================

# Build files for distribution
publish: $(JS_DIST) $(STYLES)
	cp -R $(CSS_SRC) $(DIST_DIR)/less

# Clean the build directory
clean:
	rm -rf $(BUILD_DIR)
	
# Startup web server and LiveReload server.
develop: $(BUILD_DIR) $(CSS_BUNDLE) livereload 
	watchify $(BROWSERIFY_OPTS) $(JS_ENTRY) -o $(JS_BUNDLE) &
	watchify $(BROWSERIFY_OPTS) $(TESTS) -o $(TEST_BUNDLE) &
	serve --livereload --pushstate /admin ./public ./ &
	watch $(MAKE) --quiet reload
	
#==========================================================
#  Build Targets
#==========================================================

# Build directory
$(BUILD_DIR):
	mkdir -p $@

# Distribution directory
$(DIST_DIR):
	mkdir -p $@

# Build LESS files
$(CSS_BUNDLE): $(BUILD_DIR) $(STYLES)
	lessc $(CSS_ENTRY) > $@

# Build scripts for distribution
$(JS_DIST): $(DIST_DIR) $(SCRIPTS)
	browserify $(BROWSERIFY_OPTS) $(JS_ENTRY) -o $@

#==========================================================
#  Includes
#==========================================================

# http://github.com/jibsales/make-livereload
# make-livereload uses the tiny-lr server written in node and curl for
# triggering changes.
include ./node_modules/make-livereload/index.mk