Oct
13
2011
CSS // Javascript // PHP // Tricks

Using PHP to merge and minify CSS and Javascript

Author An article by admin    Comments 5 Comments

And yet another ‘bangin’ update!  Don’t use this (I’m going to leave it here for reference), use the magicmin javascript and css minification/caching class instead for performance, better javascript minification, caching, gzip, base64_encoded images, and more!

One MAJOR factor in the usability of your website is site load time.  This is affected by a number of factors: the number of images, database queries, and the number of server requests to fetch your stylesheets and javascript files (which is what we’ll be talking about today!).

The following example is for javascript files, however I’ve included a JS and CSS version in the download at the bottom of the page.

The defining difference between our standard PHP file, and a CSS or JS file is the header content type.  Easy workaround!

header('Content-type: text/javascript');

Next, we’re on to a nifty little function that strips whitespace, comments, line breaks, tab stops, and all unnecessary bits:

function compress($buffer)
{
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, newlines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}

Next, we build an array of our (in this case, JS) files…

$get_js = array('jquery.js', 'jqueryui.js', 'yourotherjsfiles.js');

And use PHP’s handy foreach function, we’ll loop through our array, ensure that the file actually exists (file_exists), add the name of the file to our output, call our compress function, trim the filename (to make sure that we can actually process it), get the contents of the file, and end our compression output:

foreach($get_js as $js)
{
$js = trim($js);
if(file_exists($js))
{
echo "/*".$js."*/";
ob_start("compress");
echo file_get_contents($js) . "\n\r";
ob_end_flush();
}
}

Then all we have to do is call our ONE file and we’re good!

<script type="text/javascript" src="js.php"></script>

[dm]6[/dm]

Tags: , , , ,

Related Posts

5 Comments + Add Comment

  • NubeHost April 25, 2012 at 11:05 pm

    Is having a “php” extension where there was supposed to be a “js” extension harmful any way to browser’s cache?

    Reply
    • Bennett April 26, 2012 at 1:21 am

      No, the browser still interprets the script as being js rather than php

      Reply
  • Bernard May 8, 2012 at 8:20 am

    This will increase server load. For every request instead of just serving static JS file it needs to execute PHP script, which is of course slower (meaning CPU time and memory are taken). It would be better to just generate static JS file once (or on every change of code) and set src to it.

    Reply
    • Bennett June 18, 2012 at 11:14 pm

      Very true, for each request to the page, PHP is executed. To clarify, this is an effective method of generating compressed versions of multiple files- which I failed to note in my post. Thanks for the clarification!

      Reply
  • Renoir Boulanger July 24, 2012 at 2:45 am

    There is much more into minification than removing spaces and comments.

    Have you heard of both YUI Compressor and Kris Walsmith’s Assetic Symfony2 Bundle. It’s task is exactly to do that.

    Reply

Leave a comment