A command line web asset optimisation tool.
Sqweeze was built for the Sqwidget project, where it is used to build single- or multi-document compressed widgets. However, Sqweeze can be used wherever you need minification and concatenation of scripts and styles, and data encoded images and assets.
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:
Lossless compresses .PNG, .JPEG and .GIF image assets.
Sqweeze relies on a few command-line image compression tools, namely Pngrush, Jpegtran, 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).
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.
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:
A file concatenating and compressing together all the other Stylesheets in the source directory
Same as stylesheets.min.js, but embedding the image referenced in the stylesheets through the data URI scheme.
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