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.
<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.
<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:
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:
<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(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/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->jsmin = "jshrink"; // use JShrink instead
Credits
Bender uses third party libraries:
One thought on “Bender: CSS / Javascript combiner and minifier”
Comments are closed.