Bender: CSS / Javascript combiner and minifier

Bender is a class that does a simple but very useful thing: it combines your CSS / Javascripts into one file (one for CSS and one for Javascript), then minimizes these files on the fly. It makes your site load faster due to reduced number of HTTP requests. It also reduces server load and traffic. Bender is written in pure PHP and can be used even on very restricted shared hostings. It does not require any other technology, such as Java or Python.

Usage

Let’s say we have to include 2 uncomperessed Javascripts and 2 CSS files.

<html lang="en">
    <head>
        <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    </head>
    <body>
        ...
    </body>
</html>

Now let’s add Bender.

<html lang="en">
    <head>
        <?php
        require_once "Bender/Bender.class.php";
        $bender = new Bender();
        $bender->enqueue("assets/css/bootstrap.css");
        $bender->enqueue("assets/css/bootstrap-theme.css");
        $bender->enqueue("assets/js/jquery-1.10.2.js");
        $bender->enqueue("assets/js/bootstrap.js");
        // alternatively, you can use $bender->enqueue(array("assets/css/bootstrap.css", "assets/css/bootstrap-theme.css", ...));
        // place link to combined/minified CSS in <head> section
        echo $bender->output("cache/stylesheet.css");
        ?>
    </head>
    <body>
        ...
        <?php
        // place link to combined/minified Javascript to the end of <body> section
        echo $bender->output("cache/javascript.js");
        ?>
    </body>
</html>

Enqueued files will be combined, minified and stored on disk. Please make sure that output directory is writable. The resulting HTML:

<html lang="en">
    <head>
        <link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        ...
        <script type="text/javascript" src="assets/js/javascript.js"></script>
    </body>
</html>

If minified files already exist, they will not be overwritten, reducing server load.

Smarty

You can use Bender with Smarty. Simply put function.bender.php to your Smarty plugins directory and make sure Bender class is included somewhere in your project’s bootstrap script.

Smarty template syntax:

<html lang="en">
    <head>
        {bender src="assets/css/bootstrap.css"}
        {bender src="assets/css/bootstrap-theme.css"}
        {bender src="assets/js/jquery-1.10.2.js"}
        {bender src="assets/js/bootstrap.js"}
        {bender output="cache/stylesheet.css"}
    </head>
    <body>
        ...
        {bender output="cache/javascript.js"}
    </body>
</html>

Methods

enqueue($src): enqueues CSS or Javascript file. $src can be a single file (string), or multiple files (array). You can mix CSS/Javascript in one array.

$bender->enqueue("css/bootstrap.css");
$bender->enqueue(array("css/bootstrap.css", "css/style.css"));

output($filename): combines, compresses and writes CSS/Javascript to disk, then returns a link to resulting file.

echo $bender->output("cache/stylesheet.css");
echo $bender->output("cache/javascript.js");

Properties

$ttl: time to live in seconds for compiled CSS / JS files (default: 3600). 0 means “always recompile”. -1 means “never recompile”.

$cssmin: “cssmin” to use CssMin by Joe Scylla (default), any other value disables compression.

$jsmin: “packer” to use JavaScriptPacker by Nicolas Martin (default), “jshrink” to use JShrink by Robert Hafner, any other value disables compression.

$bender->cssmin = ""; // produce uncompressed CSS output
$bender->jsmin = "jshrink"; // use JShrink instead

Credits

Bender uses third party libraries:

Download from Github