使用 Make 构建静态资源 速查表

本文根据 Devhints / Make for assets 翻译。代码示例及版本范围沿用原文。此资料为归档或旧版本参考。

原文归档说明：此文档所列出的做法可能已过时。

基础编译

bin := ./node_modules/.bin

all: build/foo.js

build/%.js: src/%.coffee
    @$(bin)/coffee < $^ > $@

Stylus + Autoprefixer

bin := ./node_modules/.bin
stylus := $(bin)/stylus
autoprefixer := $(bin)/autoprefixer
styl_files := $(shell find web/ -name "*.styl")

all: public/app.css

public/app.css: css/app.styl

%.css: %.styl $(styl_files)
    @$(stylus) $< | $(autoprefixer) -b "> 1%" > $@

提示

hint:
   $(js_files)

监视

watch:
    @echo "... watching for changes"
    @while true; do make -s; sleep 1; done

Browserify

js_files := $(shell find web/ -name "*.js")

public/app.js: web/app.js
public/vendor.js: web/vendor.js

public/%.js: web/%.js $(js_files)
    $(browserify) -t [ cssify -x .css ] $< > $@