Sqweeze

A command line web asset optimisation tool.

Features

Sqweeze cuts the unnecessary bytes out of your web assets, helping you delivering your web project more fast and efficiently. With a little help from a number of well known open source third party tools, Sqweeze does the following:

1. Lossless compresses .PNG, .JPEG and .GIF image assets.

2. Compresses and concatenates into single files multiple Stylesheets and Javascript files.

3. Embeds the compressed image assets into the stylesheet, using Data-uris (for proper browsers and IE8) and MHTML (for IE6 and IE7).

4. Finally, it provides some basic functionality for linking the compressed Javascript and CSS just created, to the main HTML document, and removing automatically the links pointing to the old uncompressed ones.

Installing it

Sqweeze relies on a few command-line image compression tools, namely Pngcrush, Jpegtrain, and Gifsicle, which have to be installed first. On an Ubuntu box, you can install these all in once by running a single command line

sudo apt-get install pngcrush gifsicle libjpeg-progs

Mac OSX users can install the first two as Macports packages. The third (part of libjpeg) instead, has to be compiled manually.

Once installed these third party tools, you can install Sqweeze using the rubygems package manager

sudo gem install sqweeze

(this assumes that you have both ruby and rugygems installed).

Configuration

When run for the first time, the script creates a configuration file in the user’s $HOME directory, and sets therein the default file paths of Pngcrush and friends.

# file $HOME/.sqweeze.yml

bin_paths:
   - pngcrush: /usr/bin/pngcrush
   - jpegtran: /usr/bin/jpegtran
   - gifsicle: /usr/bin/gifsicle

If you have installed those anywhere else than in /usr/bin, you will have to edit this file with your own paths, so that sqweeze can find them.

Usage

sqweeze input_dir [target_dir]

When invoked with no options, sqweeze will simply copy the content of a source directory, compress its image assets, and finally generate three new files in the target directory:

javascripts.min.js

A file concatenating and compressing together all the other javascript files in the source directory

stylesheets.min.js

A file concatenating and compressing together all the other Stylesheets in the source directory

stylesheets.min.datauri.js

Same as stylesheets.min.js, but embedding the image referenced in the stylesheets through the data URI scheme.

MHTML Support

Whilst the generated stylesheets.all.datauri.css will work fine in most recent web-browsers (i.e Chrome, Safari, Firefox, IE 8), it will fail displaying images in Internet Explorer 6 and 7. A viable way around to this limitation, however, is that of using Microsoft’s MIME HTML. In order to have sqweeze generate also a MHTML stylesheet suitable to be read by IE6 and IE7, one has to specify the parameter --MHTML-ROOT; that is the URL of the directory where the stylesheet will be deployed.

sqweeze --mhtml-root=http://example.com/css example-sourcedir

At this point, both the Data URI and the MHTML stylesheet can be linked to the main index.html and loaded selectively through Internet Explorer’s Conditional Comments

 <!--[if (!IE)|(gte IE 8)]><!-->
      <link href="css/stylesheets.min.datauri.css" media="screen" rel="stylesheet" type="text/css" />
 <!--<![endif]-->
 <!--[if lte IE 7]>
      <link href="css/stylesheets.min.mhtml.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

This latter step can be automated by supplying the -D (DOM-Documents) parameter to the script. In this case, Sqweeze will simply delete from the DOM all the pre-existing SCRIPT and LINK elements having a src (or a href) attribute, and append the generated ones to the document’s HEAD. However, this functionality is rather crude at the moment, and most certainly will require some manual tweaking on the user side.

Inline asset optimisation (experimental)

Although the optimisation strategy described above is probably effective in most of the cases, in some cases it can be useful to reduce the amount of HTTP requests by placing compressed assets inline, directly within the HTML file, rather than in external stylesheets. Sqweeze provides functionality for compiling assets inline into the DOM document This is still experimental at the moment, and does not yet support base64 image embedding.

sqweeze -S all_inline -D source_dir/index.html source_dir

.…