Angular Project Template

bower.json

{
  "name": "Example",
  "version": "0.0.0",
  "dependencies": {
    "bootstrap-sass-official": "~3.2.0",
    "font-awesome": "4.2.0",
  },
  "appPath": "."
}

Makefile

NODE_DIR        := ./node_modules
APP_DIR         := ./app
BUILD_DIR       := ./build
BOWER_DIR       := bower_components
APP_SCRIPTS_DIR := $(APP_DIR)/scripts
APP_STYLES_DIR  := $(APP_DIR)/styles

BIN           := $(shell npm bin)
BOWER         := $(BIN)/bower
UGLIFYJS      := $(BIN)/uglifyjs
UGLIFYJSFLAGS :=
SASSC         := $(BIN)/node-sass
SASSCFLAGS    := --output-style compressed
KARMA         := $(BIN)/karma
JSHINT        := $(BIN)/jshint
WIREDEP       := $(BIN)/wiredep

APP_JS        := $(shell find $(APP_SCRIPTS_DIR) -name '*.js' ! -name '*.min.js')
APP_MIN_JS    := $(APP_JS:%.js=%.min.js)
VENDOR_JS     := $(shell find $(BOWER_DIR) -name '*.js')
MIN_VENDOR_JS := $(VENDOR_JS:%.js=dist/%.min.js)
APP_SCSS      := $(shell find $(APP_STYLES_DIR) -name '*.scss')
APP_CSS       := $(APP_SCSS:%.scss=%.css)

# Build output files
DIST_FOLDER := dist
DISTFILES   := $(DIST_FOLDER) $(DIST_FOLDER)/scripts.js $(DIST_FOLDER)/styles.css

NODE_DEPS_FLAG  := $(NODE_DIR)/.node-modules
BOWER_DEPS_FLAG := $(BOWER_DIR)/.bower-modules
WIREDEP_LIST    := $(BOWER_DIR)/.wiredep

default: build

# Bootstrapping/Dependencies #

.PHONY: depends
depends: $(NODE_DEPS_FLAG) $(BOWER_DEPS_FLAG)

$(NODE_DEPS_FLAG): package.json
	npm install
	touch $@

$(BOWER_DEPS_FLAG): bower.json
	$(BOWER) install
	touch $@

# Compile Tasks #

%.min.js: %.js
	@mkdir -p $(dir $@)
	$(UGLIFYJS) $(UGLIFYJSFLAGS) $? > $@

%.css: %.scss
	@mkdir -p $(dir $@)
	$(SASSC) $(SASSCFLAGS) $? $@

# Concat Tasks #

dist:
	mkdir -p $@

dist/scripts.js: $(APP_MIN_JS)
	cat $^ > $@

dist/vendor.js: $(VENDOR_MIN_JS)
	cat $^ > $@

dist/styles.css: $(APP_CSS)
	cat $^ > $@

.PHONY: wiredep
wiredep: $(WIREDEP_LIST)
$(WIREDEP_LIST): bower.json
	$(WIREDEP) --src app/index.html --src app/styles/main.scss --verbose > $(WIREDEP_LIST)

.PHONY: build
build: depends wiredep $(DISTFILES)

# Checks #

.PHONY: test
test:
	$(KARMA) start test/karma.conf.js --single-run --browsers PhantomJS

.PHONY: lint
lint: $(APP_JS)
	$(JSHINT) -c .jshintrc $^

.PHONY: check
check: lint test

# Cleanup Tasks #

.PHONY: clean
clean:
	-rm $(APP_MIN_JS)
	-rm $(APP_CSS)
	-rm -rf $(DIST_FOLDER)

.PHONY: clean-bower
clean-bower:
	rm -rf $(BOWER_DIR)

.PHONY: clean-node
clean-node:
	rm -rf $(NODE_DIR)

.PHONY: clean-all
clean-all: clean clean-bower clean-node

package.json

{
  "name": "Example",
  "description": "Web app with Make build system",
  "repository": {},
  "version": "0.0.0",
  "dependencies": {
    "bower": "^1.4.1",
    "concat-cli": "^1.0.1",
    "cssmin": "^0.4.3",
    "karma": "0.12.23",
    "karma": "^0.12.31",
    "karma-cli": "0.0.4",
    "karma-coverage": "0.2.6",
    "karma-jasmine": "0.1.5",
    "karma-junit-reporter": "0.2.2",
    "karma-phantomjs-launcher": "0.1.4",
    "node-sass": "2.1.1",
    "uglify-js": "^2.4.19",
    "wiredep": "2.2.2",
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "make test"
  }
}