Webtatic Optimizer

Webtatic Optimizer is a program which will optimise your website’s staticfiles, allowing your website to reduce the number of requests and bandwidth used.

Requirements

PHP >= 5.2

Download

WebtaticOptimizer-1.0.0-beta1.tgz

Installation

wget https://github.com/webtatic/Webtatic-Optimizer/archive/v1.0.0-beta1.tar.gz
tar xvf v1.0.0-beta1.tar.gz -C /usr/local/lib
ln -s /usr/local/lib/Webtatic-Optimizer-1.0.0-beta/bin/optimizer-compile.php /usr/local/bin/optimizer-compile

Usage

Usage: optimizer-compile [options] FILES<br />
Compile using the config FILES specifed</p>
<p>Options:<br />
  -h, --help             display this message<br />
  -s, --section SECTION  select the SECTION section from the config<br />
  -o, --option OPTION    select the OPTION subset from the config<br />
  -t, --type TYPE        set the config type to TYPE [default: auto]<br />
      --auto             automatically select the config type by extension<br />
      --ini              set the config type to ini<br />
      --php              set the config type to php<br />
      --xml              set the config type to xml<br />

Development

The development version of the program can be accessed from a read-only Subversion repository.

git clone https://github.com/webtatic/Webtatic-Optimizer.git

Example

Store the following in /path/to/project/optimizer.ini

[config]
version = 1.0.0
workingPath = .

[css]
defaults.output = site.css
files = "
	+ css/**.css
"

Create a css file /path/to/project/css/layout.css:

body {
    font-size: 12px;
}

Run:

optimizer-compile /path/to/project/optimizer.ini

Now there will be a /path/to/project/site.css and site.css.gz which can be loaded by your html.

Configuration

The configuration consists of a [config] section which defines the environment and what plugins to load, a [default] section which is applied to all other sections, and custom sections.

[config] section

Here you define the version of your config, any plugins to load, and the working path from which your files exist, e.g.

[config]
version = 1.0.0
plugins = autoMatch, filter, file, gzip
workingPath = http

Custom sections

Custom sections define various different configurations to be applied to different types of files, e.g. you could have a javascript and a css section.

One parameter must exist, “files’, which declares files to include or exclude from that section, e.g. the following section will only deal with javascript files in http/includes/js/ excluding my-exclude.js:

[javascript]
files = "
  + http/includes/js/**.js
  - http/includes/js/my-exclude.js
  • + indicates files matching the following pattern should be included
  • - indicates files matching the following pattern should be excluded
  • one * indicates to match any file with a pattern only in the current directory
  • two * indicates to recursively match any file with the pattern

File parameters

For each file that is matched, various parameters are assigned to it, which can be used by plugins. To add parameters, you can define them in a default.keyname = value syntax, or use matches from the input filename.

E.g. for the following structure:

  • http/includes/javascript/file1.js
  • http/includes/javascript/file2.js

The following configuration will assign the parameter “output” the value “http/includes/site.js”, the parameter “package” the values “file1” and “file2” for each file respectively, and the parameter “filename” with the full path to each file:

[javascript]
defaults.output = http/includes/site.js
files = "
  + http/includes/javascript/:package.js
"

Plugins

It is built up from PHP classes, which plug into the core. To enable plugins, define them in the [config] section. The order of the plugins is important, as they will be run in order. E.g. filter must come before file and gzip otherwise nothing will be done to the output.

[config]
plugins = autoMatch, filter, file, gzip

The plugins are:

  • AutoMatch

A helper plugin which adds settings from the configuration based on file matches.

  • File

A plugin that concatenates and stores the contents of input files into output files.

  • Filter

A plugin that filters the contents of input files and passes the result onto the next plugin.

  • Gzip

A plugin, like File, but Gzips the contents of the output files.

AutoMatch

AutoMatch will match any input file that has a parameter matched with a PREG expression, and add its defined defaults to that file’s parameters.

Default AutoMatch configuration comes with the optimizer to perform the best combination of filters to css and javascript files, however you can define additional configurations. E.g. this will add configuration to minify any input matches that have a jquery-style filename:

[config]
autoMatch.jQuery.match.filename = "#/jquery\..*?\.js$"
autoMatch.jQuery.defaults.filters = jsmin

File

This will save to file any input files, which have an “output” parameter, to the output file location. You can specify the output file in your config section.

E.g. the following will concatenate all css files and store in http/includes/site.css

[css]
defaults.output = http/includes/site.css
files = "
  + http/includes/css/**.css
"

You can also use an input file’s parameters in the output filename, e.g. the following will, for each subdirectory of the javascript folder, concatenate all javascript files, and store in seperate files per subdirectory.

[javascript]
defaults.output = http/includes/:package.js
files = "
   + http/includes/javascript/:package/**.js
"

Filter

The Filter plugin can perform the following filters:

  • Cssmin

Minify css file content, removing whitespaces and comments

  • CssUrlModified

Adds ?modifed-timestamp onto urls in css url()’s. This allows you to additionally turn on aggressive http expiry times, whilst user agents will still get fresh images back when a file is modified.

  • Jsmin

Minifies javascript file content using the PHP port of Jsmin.

E.g. to specify filters add the following to your config section:

[section]
defaults.filters = cssUrlModified, cssmin

Gzip

Gzip acts almost identically to the File plugin, except it will read the “gzip” parameter for the output location. By default, this is the “output” parameter concatenated with “.gz”

Together with a configuration, these can be used to concatenate css and javascript files and minify them as applicable, and store them in uncompressed and compressed files for serving via the web.