Symphony.

A new extension, "Static Files Compressor" is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

About

This is a small library for merging, minifying and compressing static files in hope of increasing a web pages preformance.

Merging multiple files
By merging multiple files into one request the client only has to make one HTTP request, which means we can bypass the max-2-connections-per-host-bottleneck.

Minify/compress
By minifying/compressing javascript and css code one can reduce the size of the data sent to the client by removing stuff like comments whitespaces, etc. This saves transfer time.

Gzip
Using gzip output compression, the size of responses are reduced dramatically to save transfer time.

Caching
By explicitly specifying how the client should cache the response, it might improve the experience for that client and save server load.

It also caches the request's response in a file on the server to save processing time.

How to install

• Extract archive and move the directory static_files_compressor to your extensions directory.
• Enable it in Symphony

How to use

Instead of referencing all your css/js files seperately like this:

• /workspace/styles/reset.css
• /workspace/styles/library.css
• /workspace/styles/master.css
• /workspace/styles/page-frontpage.css
• /workspace/styles/page-schools.css
• /workspace/styles/page-subjects.css
• /workspace/styles/page-info.css

Everything can be combined into one request:

• /workspace/styles/SFC.css?path=styles&compress&files=reset.css,library.css,master.css,etc..

Breaking it down:

• /workspace/styles/ Necessary so that all paths in the css files are still relative.
• SFC The keyword for initializing this extension.
• .css Specifies the mode, can be either css, js or txt.
• ?path=style A path relative to the workspace. All files must be within this path.
• &compress A compression/minify enginge will be used (only for css and js).
• &files=f1,f2 A comma seperated list of files within the "path"

Other params:

• cache=normal Can be either normal, refresh or flush.
• cachetimeout=10 If some files are remote files, cache cannot be more than 10 sec old.
• outputcompress=0 Disable output compression, gzip.
• debug Adding this param shows debug mode with FirePHP.

XSLT utility
This package also includes a small XSLT utility in utilities/. It is moved to workspace/utilities when the extension is installed. Please see the file's documentation on how it works.

Debug
Debug info is generated if ?debug param is added. The info is sent via FirePHP so you need to install the FirePHP extension for Firebug.

License

3rd party code each has their own license.

Copyright (c) 2011 Newzoo Ltd.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Attachments:

Screen shot 2011-03-31 at 9.11.11 PM.png

holy s**t...i was going to make this exact same extension...but not getting too far since i'm still trying to figure out how to actually write an extension. I'll take a look at this one. thanks!

first thing, when cloning from github, this folder is created:

Static-Files-Compressor-for-Symphony-CMS

but it seems like you want to have this folder created: staticfilescompressor

You might want to rearrange your repository to make it easier for people to just clone and have it show up in the extensions list. Otherwise this error gets thrown:

Could not find extension at location /home/site.com/extensions/static-files-compressor-for-symphony-cms/extension.driver.php
An error occurred in /home/site.com/symphony/lib/toolkit/class.extensionmanager.php around line 624

very spooky. I was thinking about how I would go about building this on the way to work...then I sit down and check my mail and viola! There is one created already!

Nice work, looks awesome.

For these extensions that have non-standard repository names, the ideal would be to have a repository with the same name as the extension directory. When this is not possible, there should be instructions to use a different clone command:

git clone git://github.com/mqchen/Static-Files-Compressor-for-Symphony-CMS.git static_files_compressor

That last argument will be used to name the directory.

ah, thanks stephen. I didn't know about that

I've recently started a personal HTML5 site template (boilerplate-esque) effort, and am currently using minify. It sounds like this extension will save me having to use minify in my Symphony version of it. :) Looking forward to trying it - thanks.

Nice one!

Static Files Compressor updated to version 0.1.2 on 1st of April 2011

Static Files Compressor updated to version 0.1.2.1 on 1st of April 2011

This update includes various bug fixes, so it is highly recommended that you update. You only need to replace the old PHP files with the updated ones.

Note: If your css files include a @CHARSET "UTF-8"; declaration, you must update.

What´s new:

This update also adds support for glob-patterns, meaning that you can now specify the files param using patterns like so:
files=*.css, or eg.
files=reset.css,"{library,master,type-*}.css" (notice the quotes).

The first pattern will match all files with .css extension. The second example will first load file reset.css and then use glob for the expression, which will match files library.css, master.css, type-frontpage.css, type-articles.css, etc.

Compressors

If anyone is interested, I did a small test on the four compressors that are bundled with the extension. For Javascript both JSMin and JSMinPlus are bundled. JSMinPlus is about 2% more effective than JSMin, but from my experience it is almost 4 times slower.

Both CssMin and MinifyCSSCompressor are very similar in both performance and compression.

To change compressors or add your own you must edit the property $compressors in the file SFCompress.php. For example: 'js' => array('JSMinPlus', 'minify'), would specify to load a class called JSMinPlus in lib/Compressors/JSMinPlus.php and run the static method minify.

So, it is quite easy to add your own.

An example from one of the sites I run, the CssMin compressor compresses 6 files (11kb) of css in about 0.054 sec. It reduces 26% file size (which is about the average for my sites).

JSMin compresses 147,181 bytes to 118,216 bytes (20%) in 1.6 sec.

In addition to these compressions, gzip does on average 60-70% compression (of the compressed/minified code).

When the cache is healthy, the whole thing it takes about 0.02 sec on my server.

@mqchen - this looks amazing! I look forward to giving it a try.

@mqchen,

I'm encountering some problems when trying to use it.

This is the output html:

<link rel="stylesheet" type="text/css" media="all" href="http://localhost/filantropia/workspace/public/css/SFC.css?path=public/css&amp;files=xandersoftware.css,a.css,test/b.css,c.css&amp;compress&amp;debug" />

Don't know why, but it doesn't load the files. Am I missing something? This part

SFC.css?path=public/css&files=xandersoftware.css,a.css,test/b.css,c.css&compress&debug

is generated with your sfc-urlbuilder xsl template.

Thanks.

@vladG

Could you check the .htaccess file? There should be a rule for SFC there...

What kind of error message do you get by the way?

How does this compare to http://html5boilerplate.com/ build script? I assumed this was using apache ant, while the extension uses php?...

@newnomad
From a glance at HTML5boilerplate, it seems that they use YUI compressor for both CSS and JS. It is actually a more effective compressor, but it is written in Java, and not all webservers support that. The compressors in SFC are written in PHP, but it is very easy to add your own.

Also, this extension updates the compressed file sent to the client whenever you modify a file, so you don´t need to explicitly flush the cache or something. It also supports fetching remote files (it is, however, recommended that you separate all your remote files into a separate SFC request, because then the client can store its local cache longer).

Static Files Compressor updated to version 0.2 on 3rd of April 2011

Added support for YUICompressor for those who are allowed to run java on their webserver.

Here is a comparison of YUICompressor vs JSMin:

Full res

As you can see it is both more effective and faster. To enable it, open SFCompress.php and comment out

'js' => array('JSMin', 'minify'),

and comment in: 'js' => array('YUICompressor', 'compressJS'),

Attachments:

yui-vs-jsmin.jpg

@mqchen

from .htacces:

### STATIC FILES COMPRESSOR BEGIN REWRITE
RewriteRule ^.*/SFC.([a-z]+)$ extensions/static_files_compressor/lib/compress.php?mode=$1&%{QUERY_STRING} [L]
### STATIC FILES COMPRESSOR END

This is $_GET in compress.php:

Array
(
    [mode] => css
    [path] => public/css
    [files] => xandersoftware.css,a.css,test/b.css,c.css
    [compress] => 
    [debug] => 
)

@vladG

That $_GET array is correct. SFC only checks the keys for compress and debug.

It seems the error is that a backslash i missing in that RewriteRule, right before the first slash. I have no idea why that is not there in your case. It should be:

RewriteRule ^.*\/SFC.([a-z]+)$ extensions/static_files_compressor/lib/compress.php?mode=$1&%{QUERY_STRING} [L]

@mqchen

Well, I pasted the rule but it still doesn't work ... The $_GET array is the same ...

I'm clicking on this generated link

<link rel="stylesheet" type="text/css" media="all" href="http://localhost/filantropia/workspace/public/css/SFC.css?path=public/css&amp;files=xandersoftware.css,a.css,test/b.css,c.css&amp;compress&amp;debug" />

to check the array. There is a print_r($_GET);die; in compress.php.

@vladG

The $_GET array is correct. It is supposed to be like that. Do you get any error messages if you request that URL directly in your browser? What is outputted both in the browser and FirePHP?