I used an existing php class from http://joliclic.free.fr/php/javascript-packer/en/
Should work on both php4 and php5
(if using php4, just replace class.JavaScriptPacker.php with class.JavaScriptPacker.php4)
This is setup for the following-
/
/inc/
/inc/class.JavaScriptPacker.php
/js/
/js/cache/
/js/main.js
/js/tooltip.js
/js/js.php
/css/
/css/cache
/css/main.css
/ibox/skins/darkbox/darkbox.css
Make sure that /js/cache/ and /css/cache/ are writeable (chmod 777 for most people)
Here is /js/js.php
/js/js.php
<?php
ob_start();
require '../inc/class.JavaScriptPacker.php';
/********************************************
Edit the array below to add javascript files, relative to the location of this file.
*/
$arFiles = array(
"main.js",
"tooltip.js",
);
/********************************************/
function compressJavascript($file) {
$script = file_get_contents($file);
$packer_php = new JavaScriptPacker($script, "Normal", true, false);
$output = $packer_php->pack();
return $output;
}
$output = "";
for($i = 0; $i < count($arFiles); $i++) {
$devcontent = file_get_contents($arFiles[$i]);
if(file_exists("cache/" . md5($arFiles[$i]) . ".cache")) {
//file exists.
$content = file_get_contents("cache/" . md5($arFiles[$i]) . ".cache");
$split = explode("#",$content,2);
if($split[0] == md5($devcontent)) {
//file was not modified according to md5
$output = $output . $split[1];
}else{
//file was modified according to md5, so update it.
$newcontent = compressJavascript($arFiles[$i]);
$create = file_put_contents("cache/" . md5($arFiles[$i]) . ".cache", md5($devcontent) . "#" . $newcontent);
$output = $output . $newcontent;
}
}else{
//file doesn't exist.
$newcontent = compressJavascript($arFiles[$i]);
$create = file_put_contents("cache/" . md5($arFiles[$i]) . ".cache", md5($devcontent) . "#" . $newcontent);
$output = $output . $newcontent;
}
}
header("Content-Type: application/javascript");
echo $output;
?>
Then here's /css/css.php
/css/css.php
<?php
ob_start();
require '../inc/class.JavaScriptPacker.php';
/********************************************
Edit the array below to add css files, relative to the location of this file.
*/
$arFiles = array(
"main.css",
"../ibox/skins/darkbox/darkbox.css",
);
/********************************************/
function compressCSS($file) {
$script = file_get_contents($file);
$packer_css = new JavaScriptPacker($script, 'None', true, false);
$output = $packer_css->pack();
return $output;
}
$output = "";
for($i = 0; $i < count($arFiles); $i++) {
$devcontent = file_get_contents($arFiles[$i]);
if(file_exists("cache/" . md5($arFiles[$i]) . ".cache")) {
//file exists.
$content = file_get_contents("cache/" . md5($arFiles[$i]) . ".cache");
$split = explode("#",$content,2);
if($split[0] == md5($devcontent)) {
//file was not modified according to md5
$output = $output . $split[1];
}else{
//file was modified according to md5, so update it.
$newcontent = compressCSS($arFiles[$i]);
$create = file_put_contents("cache/" . md5($arFiles[$i]) . ".cache", md5($devcontent) . "#" . $newcontent);
$output = $output . $newcontent;
}
}else{
//file doesn't exist.
$newcontent = compressCSS($arFiles[$i]);
$create = file_put_contents("cache/" . md5($arFiles[$i]) . ".cache", md5($devcontent) . "#" . $newcontent);
$output = $output . $newcontent;
}
}
header("Content-Type: text/css");
echo $output;
?>
What the packer does is strip comments, remove whitespace, and (for the javascript one) it will create shorter variables, and encode it. This is useful because it will save bandwidth and make it a little more challenging for people to take your code or figure out your system.
The js.php and css.php use different compression types. Javascript uses "normal" because this will create shorter variables and whatnot. CSS uses "none" so that only comments and whitespace are removed. If you use "normal" on CSS you'll end up with javascript instead of css code.
So instead of using a <script> or <style> tags for each of your js/css files, you can use two to include js.php and css.php files (or even use PHP to include them in your file, removing any extra http requests.) Then edit the arrays in js.php and css.php to add files. They are all compressed into one page which will cut down on page requests as well as bandwidth.
The advantage of using this is so that you can develop in plain, readable text but still compress or hide your code to users without doing any extra steps. The updated code will create cached versions of the compressed files. Then using md5, compare the 2 copies. If the md5 is different, then it will update the cache.
It's not intended for sites under development. It's almost impossible to debug your javascript if it's compressed/encoded so I'd recommend only using this on a production version of your web site. Read more about Javascript and CSS aggregator/compressor