What's new? | Help | Directory | Sign in
Google
minify
Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.
  
  
  
  
    
Search
for
Updated Jun 21, 2008 by st...@mrclay.org
Labels: Phase-Deploy, Featured
UserGuide  
Your friendly guide to installing and using Minify.

Installation

1. Download the latest version of Minify and extract the files to a new "minify" directory, ideally outside of the webroot.

Done! Minify is just the library of files inside minify/lib.

(Optional) See TestingMinify if you'd like to run unit tests or see example configurations in action.

Usage

We're going to build a small PHP file that calls Minify::serve(), turning it into an HTTP server for our Javascript and CSS.

1. Place the following code in a file "min.php" in your root web directory.

<?php

// Prepends include_path. You could alternately do this via .htaccess or php.ini
set_include_path( 
    '/full/path/to/minify/lib'
    . PATH_SEPARATOR . get_include_path()
);

require 'Minify.php';
Minify::useServerCache();
Minify::serve('Groups', array(
    'groups' => array()
));

2. Open a non-IE/win web browser to http://yourhost/min.php/ (IE/win will not display Javascript files directly.)

You should see "HTTP/1.0 400 Bad Request". Minify is working, let's give it something to serve.

Terminology: From here on I'll use "minify URI" to mean a URI that points to a Minify server, like "min.php/" in our example.

3. Note the paths of a few Javascript files you'd like to serve together. If they're in the webroot, we can substitue "//" for the DOCUMENT_ROOT.

E.g.: //js/jQuery.js is a shortcut for {$_SERVER['DOCUMENT_ROOT']}/js/jQuery.js.

4. Add them to the 'groups' array inside the Minify::serve() call, like this:

Minify::serve('Groups', array(
    'groups' => array(
        'js1' => array('//js/yourFile1.js', '//js/yourFile2.js')
    )
));

5. Browse to http://yourhost/min.php/js1

After a brief delay (on the first request PHP has to compress the files), you'll receive a single minified Javascript file containing the code of "yourFile1.js" and "yourFile2.js". The file will also be sent with deflate or gzip encoding, depending on your browser.

6. Now you can use "/min.php/js1" as the src attribute for (X)HTML SCRIPT elements.

Serving more combinations of files, including CSS

You can add more elements to the "groups" array to serve more files. E.g.:

Minify::serve('Groups', array(
    'groups' => array(
        'js1' => array('//js/yourFile1.js', '//js/yourFile2.js')
        ,'js2' => array('//js/yourFile1.js', '//js/yourFile3.js')
        ,'jQuery' => array('//js/jquery-1.2.6.js')
        ,'css' => array('//css/layout.css', '//css/fonts.css')
    )
));

Now you can also use these URLs:

Sending far future Expires headers

By default Minify enables conditional GETs for client-side caching, but in this model the browser has to continuously check back with the server to revalidate its cache. A better method is to send far future Expires headers and change the URL when the file changes. As long as you generate your HTML with PHP, Minify makes it easy to do this.

1. Move the 'groups' configuration array into a separate file "groupsConfig.php":

<?php
// configures both Minify::serve() and Minify_Build
return array(
    'js1' => array('//js/yourFile1.js', '//js/yourFile2.js')
    ,'js2' => array('//js/yourFile1.js', '//js/yourFile3.js')
    ,'jQuery' => array('//js/jquery-1.2.6.js')
    ,'css' => array('//css/layout.css', '//css/fonts.css')
);

2. Adjust "min.php" to use this file:

Minify::serve('Groups', array(
    'groups' => (require '_groupsConfig.php')
));

3. In your HTML-generating script, create Minify_Build objects for each minify URI you're going to use, and, to each, apply the uri() method:

require 'Minify/Build.php';
$_gc = (require "_groupsConfig.php");
$js1Build = new Minify_Build($_gc['js1']);
$cssBuild = new Minify_Build($_gc['css']);

echo "<link rel='stylesheet' type='text/css' href='" . $cssBuild->uri('/min.php/css') . "' />";
/* ... */
echo "<script type='text/javascript' src='" . $js1Build->uri('/min.php/js1') . "'></script>";

5. Open the (X)HTML page in your browser. The Javascript and CSS should "work".

6. View source. The minify URIs should look like: "/min.php/js1?##########" (a unix timestamp)

7. Now that our URI's are synched with source file changes, we can safely send Expires headers. In "min.php":

Minify::serve('Groups', array(
    'groups' => (require '_groupsConfig.php')
    ,'setExpires' => $_SERVER['REQUEST_TIME'] + 31536000 // now + 1 yr
));

Now "min.php" will serve files with Expires headers, causing the browser to always retrieve them from cache (until the expiration date).

When you make a change to any of your source Javascript/CSS files, your HTML file will have a different querystring appended to the minify URIs, causing the browser to download it as a new URL, and Minify will automatically rebuild its cache files on the server.

Fixing URIs in CSS files

If you serve CSS with Minify you may notice your relative URIs in your CSS no longer point to the right places. To fix this, serve() can be pass an option to the CSS minifier that will prepend a string to all relative URIs. E.g.:

$serveOptions = array(
    'groups' => (require '_groupsConfig.php')
    ,'setExpires' => $_SERVER['REQUEST_TIME'] + 31536000 // now + 1 yr
);
// pass the 'prependRelativePath' to the CSS minifier:
$serveOptions['perType'][Minify::TYPE_CSS]['prependRelativePath'] = '/css/';
Minify::serve('Groups', $serveOptions);

Notes


Comment by rpof.org, Jul 08, 2008

How can I get Minify to work w/ canonical urls? For instance right now I'd serve my style sheets like this: $cssBuild->uri('minify.php/css') which results in <link rel="stylesheet" type="text/css" href="/minify.php/css?1215531386" media="screen" /> but say i wanted the result to be: <link rel="stylesheet" type="text/css" href="/source/css?1215531386" media="screen" /> What would the htaccess for that be? I tried: RewriteRule ^source/([a-zA-Z0-9-]*)/?$ /minify.php?files=/$1 [L] and many variations revolving around that but none of them worked. Any clues?

Comment by st...@mrclay.org, Jul 08, 2008
  1. Minify needs to respond correctly at the URI "/minify.php/css". I assume you've got that
  2. If you want public URLs like "/source/css?1215531386" then you use $cssBuild->uri('/source/css'); The URI method just adds the querystring.
  3. in .htaccess (I think):
  4. RewriteRule ^/source/(.*)$ /minify.php/$1 [L]

Sign in to add a comment