Bundling javascript with htaccess and php - php

Question

I am currently trying to bundle my javascript so I can receive a higher score in page speed/yslow. But i am running into walls with this approach. I am currently using this TUTORIAL as guidance to bundle the js files. I am calling the js files but in the firefox tool is showing that the file bundle.js does not exists which is true but with the htaccess i am chaning the file from bundle.php to bundle.js. But I am not getting any results. Can someone help me pinpoint the issue or is there a better approach to bundle js files?
HERE is my EXAMPLE. When working properly with the js files it should show 4 input fields for file uploads.
This is how I am calling the js files
<script src='core/bundle.js?js=js/jquery-ui-1.8rc2.custom.min.js,js/globalFunctions.js,js/uploaderPreviewer.js,js/itemForm.js&m=4948599067'>
</script>
.htacces to change file type*
RewriteEngine on
RewriteRule ^bundle.js$ bundle.php [QSA,L]
core/bundle.php
include "JSMin.php";
$path = "../../";
$files = explode(",", $_GET['js']);
$missing = array();
$cache = '';
foreach ($files as $index => $file) {
if (strtolower(substr($file, -2)) != 'js') {
unset($files[$index]);
} else if (file_exists($path.$file)) {
$cache .= $file;
$cache .= filemtime($path.$file);
} else {
$missing[] = $file;
unset($files[$index]);
}
}
$cache = 'cache/'.md5($cache);
if (count($missing)) {
header("Content-type: text/javascript");
header("Pragma: no-cache");
header("Cache-Control: no-cache");
echo "alert('Could not load the following javascript source files:\\n\\n- ".implode("\\n- ", $missing)."\\n\\nJavascript not loaded / running!');";
exit;
}
if (count($files)) {
// create cached version if not present
if (!file_exists($cache)) {
$js = '';
foreach ($files as $file) {
$js .= JSMin::minify(file_get_contents($path.$file));
}
file_put_contents($cache, $js);
}
// calculate last-modified & etag send caching headers
$last_modified_time = filemtime($cache);
$etag = md5_file($cache);
header("Content-type: text/javascript");
header("Pragma: public");
header("Cache-Control: public");
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT");
header("Etag: ".$etag);
if (#strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $last_modified_time || trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) {
header("HTTP/1.1 304 Not Modified");
exit;
}
readfile($cache);
}

Answer 1

Here's what I've been using successfully for many years (no .htaccess needed):
In html:
<script type = "text/javascript" src = "js/scripts.php?build=12345&load=script1,script2,script3,folder/script4"> </script> <!-- do not specify the .js extension -->
In php (file scripts.php):
<?php
error_reporting(E_ERROR);
// see http://web.archive.org/web/20071211140719/http://www.w3.org/2005/MWI/BPWG/techs/CachingWithPhp
// $lastModifiedDate must be a GMT Unix Timestamp
// You can use gmmktime(...) to get such a timestamp
// getlastmod() also provides this kind of timestamp for the last
// modification date of the PHP file itself
function cacheHeaders($lastModifiedDate) {
if ($lastModifiedDate) {
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= $lastModifiedDate) {
if (php_sapi_name()=='CGI') {
Header("Status: 304 Not Modified");
} else {
Header("HTTP/1.0 304 Not Modified");
}
exit;
} else {
$gmtDate = gmdate("D, d M Y H:i:s \G\M\T",$lastModifiedDate);
header('Last-Modified: '.$gmtDate);
}
}
}
// This function uses a static variable to track the most recent
// last modification time
function lastModificationTime($time=0) {
static $last_mod ;
if (!isset($last_mod) || $time > $last_mod) {
$last_mod = $time ;
}
return $last_mod ;
}
lastModificationTime(filemtime(__FILE__));
cacheHeaders(lastModificationTime());
header("Content-type: text/javascript; charset: UTF-8");
ob_start ("ob_gzhandler");
foreach (explode(",", $_GET['load']) as $value) {
if (is_file("$value.js")) {
$real_path = mb_strtolower(realpath("$value.js"));
if (strpos($real_path, mb_strtolower(dirname(__FILE__))) !== false || strpos($real_path, mb_strtolower(dirname(dirname(__FILE__)).DIRECTORY_SEPARATOR.'modules'.DIRECTORY_SEPARATOR)) !== false) {
lastModificationTime(filemtime("$value.js"));
include("$value.js");echo "\n";
}
}
}
?>
This compresses, merges and caches the js files