Skip to content
msiebuhr edited this page Aug 6, 2012 · 1 revision

If you have a small single-page web-app, ex.

http-pub/
    index.html
    style.css  # Stylesheet used in index.html
    app.js     # JS application code used in index.html
    img/
        background.png

Prerequisites

Add assetgraph-builder to your package.json:

...,
"devDependencies": {
    "assetgraph-builder": "*"
}
...

And run npm install to install it.

First Run

./node_modules/.bin/buildProduction --root http-pub --outroot http-pub-production http-pub/index.html

This will open index.html, parse it and find all references (style.css and app.js), open and parse those, find refernces (background.png) and so forth until no further outgoing refernces are found.

It will then optimize (minimize css, js and PNG's), inline (JS and CSS), and such until it can't figure out more stuff to improve on and then write the resulting files to http-pub-production.

Cooking a makefile

This can trivially be put into a Makefile:

HTTP_PUB_FILES:=$(shell find http-pub -type f)

http-pub-production: http-pub/index.html $(HTTP_PUB_FILES)
    ./node_modules/.bin/buildProduction \
        --root $(<D) \
        --outroot $@ \
        $<

Thus typing make http-pub-production will create an optimized build for you.

Clone this wiki locally