make-assets.md

   1 ---
   2 title: Make for assets
   3 hljs_languages: [makefile]
   4 ---
   5
   6 ## Basic compiling
   7
   8 ```makefile
   9 bin := ./node_modules/.bin
  10
  11 all: build/foo.js
  12
  13 build/%.js: src/%.coffee
  14     @$(bin)/coffee < $^ > $@
  15 ```
  16
  17 ## Stylus + Autoprefixer
  18
  19     bin := ./node_modules/.bin
  20     stylus := $(bin)/stylus
  21     autoprefixer := $(bin)/autoprefixer
  22     styl_files := $(shell find web/ -name "*.styl")
  23
  24     all: public/app.css
  25
  26     public/app.css: css/app.styl
  27
  28     %.css: %.styl $(styl_files)
  29         @$(stylus) $< | $(autoprefixer) -b "> 1%" > $@
  30
  31 ## Hint
  32
  33     hint:
  34        $(js_files)
  35
  36 ## Watching
  37
  38     watch:
  39         @echo "... watching for changes"
  40         @while true; do make -s; sleep 1; done
  41
  42 ## Browserify
  43
  44     js_files := $(shell find web/ -name "*.js")
  45
  46     public/app.js: web/app.js
  47     public/vendor.js: web/vendor.js
  48
  49     public/%.js: web/%.js $(js_files)
  50         $(browserify) -t [ cssify -x .css ] $< > $@