API: Script: CSS and JS Minifiers

ebollens edited this page Oct 4, 2011 · 10 revisions
Clone this wiki locally

Description

The framework provides scripts that will minify Javascript and CSS just-in-time. This allows one to avoid minifying their Javascript and CSS every time it is altered, and it makes it possible to deliver particular CSS and JS to only devices of a given classification.

It should be noted that, for pages that include the CSS Handler and JS Handler, these handlers have the same functionality and should be used instead to minify to reduce the number of HTTP requests. The syntax is the same as described below for the minifiers.

Intent

Load times prove to be the major delimiting factor to the mobile browsing experience, and therefore a set of scripts should exist that enable sites to compress assets, just-in-time, through the framework.

Implementation

Standalone Minifiers

The standalone minifier for Javascript:

http://{MWF_INSTALLATION_ROOT}/assets/min/js.php

The standalone minifier for CSS:

http://{MWF_INSTALLATION_ROOT}/assets/min/css.php

Classification Awareness

Minification of custom sheets can target a specific classification:

  • basic
  • standard
  • full

The minification scripts and handlers all take the above three classification names as GET parameters. The values of these parameters, if used, should be a set of URL encoded web paths. If more than one path is specified for a single GET parameter, then they should be concatenated with a plus sign (+).

This example produces a minified version of a Javascript file for standard devices and above:

<script src="http://{MOBILE_DOMAIN}/assets/min/js.php?standard={URL_ENCODED_PATH}" type="text/javascript"></script>

This example produces a minified version of two CSS files:

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/min/css.php?standard={URL_ENCODED_PATH}+{URL_ENCODED_PATH_2}" type="text/css">

These can be used in combination at multiple classification levels:

<script src="http://{MOBILE_DOMAIN}/assets/min/js.php?standard={URL_ENCODED_PATH}&full={URL_ENCODED_PATH_2}" type="text/javascript"></script>