Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
simple, fun, static-file builder for jade, stylus, and javascript
JavaScript
branch: watch-unknown-…

This branch is 27 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
lib
test/fixtures
.gitignore
index.js
package.json
readme.md

readme.md

Mason

Simple static-file build system for jade, stylus, and JavaScript.

  • Express plugin for easily rendering built-or-debug HTML, CSS, and JS.
  • Command-line mason executable for easily building projects.
  • JavaScript API for building from within your own code.

Why?

You have a dozen site-wide platform dependencies that you want to package in platform.js. You have per-page JS assets that you want to package in page-name.js files. During development, you need all of these assets to be included as separate, uncompiled files with line numbers. During production, you need to flip a switch to minify all these files and include them in the right places. You want to easily generate static html and css from jade and stylus.

Install mason

  $ npm install -g mason

or use package.json's devDependencies:

  "dependencies":{
    "mason":"latest"
  }

Build static files

use the settings in mason.json:

  $ mason build

or using devDependencies:

  $ node_modules/.bin/mason build

Watch your files

  $ mason watch

(mason is smart about recompiling - it performs the minimum possible build for each file change)

  $ mason watch -j debug

Render a mason asset within a view

!!! 5
html
  head
    != mason('platform.js')

By default, mason build injects compressed (uglified) script tags via the != mason() local.

To inject individual scripts for debugging, use:

  $ mason build -j debug

mason.json

base: Tells mason.build() where to put your compiled files

src: Used by mason.locals() to render URLs (eg, /compiled/platform.js instead of /work/project/public/compiled/platform.js)

renderer: Specify the default renderer for this asset

javascript:" Specify the default renderer for this type of asset

{
  "javascript": "debug",

  "platform.js": {
    "type": "javascript",
    "source": {
      "base": "public",
      "src": [
        "vendor/underscore-1.3.3.js",
        "vendor/knockout-2.0.0.js"
      ]
    },
    "dest": {
      "base": "public",
      "src": "compiled/platform.js"
    },
    "renderer": "uglify"
  },

  "page.js": {
    "type": "javascript",
    "source": {
      "base": "public",
      "src": [
        "js/a.js",
        "js/b.js"
      ]
    },
    "dest": {
      "base": "public",
      "src": "compiled/page.js"
    }
  },

  "global.css": {
    "type": "stylus",
    "source": "styles/global.styl",
    "dest": {
      "base": "public",
      "src": "compiled/global.css"
    }
  },

  "test.html": {
    "type": "jade",
    "source": "views/test.jade",
    "dest": {
      "base": "public",
      "src": "test.html"
    }
  }
}

JavaScript API

Build static files

  var mason = require('mason');
  mason.build(__dirname, {
    'page.js': 'uglify'
  });

(mason.json resides in __dirname)

Use mason in an express app

  var app = express();
  app.locals(mason.locals(__dirname));

By default, mason.locals will inject a compressed (uglified) script into your view.

To control how specific assets are injected, use:

  var app = express(),
      config = {
        'platform.js': 'uglify',
        'page.js': 'debug'
      };
  app.locals(mason.locals(__dirname, config));
Something went wrong with that request. Please try again.