Minify - WebsiteBaker snippet

Combine multiple CSS and JS files in single files and automatically compress them to an optimal format.

Note: this snippet is meant to be used by experienced WebsiteBaker users!

CMS systems - including WebsiteBaker -  are using multiple CSS and JS files defined in the template and also generated by modules/addons.
These multiple files will tell the browser to create a new connection for every seperate file. Depending on the number of files this can be bad for your website loading experience.

Also external javascript like jQuery loaded from CDN and font files will create multiple connections.

This snippet will combine all(*) css and javascript files into single files. One for CSS and one for JS.

Install

The snippet is installed just like any other module or snippet in WebsiteBaker. After installation two new functions are available in your template.

<?php minify_css(); ?>

and

<?php minify_js(); ?>

These commands will write a line with pointing to the compressed file minified.css and minified.js.
Therefore, put this command on the same lines in your template where normally your .css and .js files would be located.

Since this snippet function also adds the frontend.css and frontend.js files used by other modules you must remove the WB functions for adding these files
Remove the lines register_frontend_modfiles('css'); and register_frontend_modfiles('js'); from your template.

Configuration

Before calling these functions you will need to define the needed CSS and JS files.

This is done by adding somewhere in the top of your template (before the actual output) in an existing PHP code section (or a PHP code section to be created) the variables (arrays) $css and $js.

Example:

<?php
$css[] = "css/bootstrap.min.css";
$css[] = "css/font-awesome.css";
$css[] = "css/custom.css";
$css[] = "css/fancybox/jquery.fancybox-1.3.4.css";
$css[] = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700';
?>

and for the javascript:

<?php 
$js[] = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
$js[] = "js/bootstrap.min.js";
$js[] = "js/skrollr.min.js";
$js[] = "fancybox/jquery.fancybox-1.3.4.pack.js";
?>

These are just examples. Use the same CSS and javascript you would normally use in your template.

Next to the defined css and javascript files the snippet will add the frontend.css and frontend.js files of installed snippets and all used modules.

Because one minified css/js is used for all pages in the website the snippet will add all of them in the combined output. This could give problems - mostly in javascript - because functions are conficting.
Testing is mandatory, and when it has a conflict it is possible you cannot use this module on your website.

Refreshing the generated CSS and JS

The snippet will check and detect updated files by compairing timestamps of source files and the generated file. If there are newer files found the minified versions will automaticaly be re-generated.
It is also possible to force generating new versions. This can be necessery when new modules using frontend.css/js are added. These files might have older timestamps and for that reason the snippet will not detect the changes.

Forcing can be done requesting a page on your website with the parameter ?force.
Also the snippet tries to recognise it a page is requested by using CTRL-F5 or any other "do not use cache" refreshing method. If this is found the files will be re-generated too.
Note: Re-generating the css and js files will only be done when the user is logged in. Normal visitors will never start re-generating.

* javascript called from other scripts could present issues. Testing is very important here!

Credits

A big thank you to Matthias Mullie for creating the great PHP library: Minify.