Experience Internet is an award–winning web design agency with a 110% money–back guarantee. Call us on 0845 053 3139 to find out more.

SL Combinator

Speed up your website by combining and compressing JavaScript or CSS files on-the-fly.

Overview

ZIP file iconDownload SL Combinator, v2.1.0 (ZIP, 55KB)

SL Combinator speeds up your website by automatically combining and compressing the JavaScript or CSS files of your choosing, resulting in smaller file sizes, and fewer HTTP requests.

SL Combinator saves previously combined and compressed files for later use, and is smart enough to check for an up-to-date cache file before deciding to create a new one.

What’s the big deal?

Best practise dictates that we combine and compress JavaScript and CSS files wherever possible, to reduce HTTP requests and download times.

Unfortunately, minified JavaScript and CSS is no good when you’re actually writing and testing code, so you end up with multiple uncompressed files for development, and separate combined and compressed files for the live site.

Every time you update your code, you have to manually re-combine and re-compress the source files for use on the live site, making even the most trivial update a major annoyance.

Of course, you could just decide it’s not worth the hassle, and use the development files on the live site; but then your visitors suffer because of the increased page weight.

SL Combinator puts an end to this frustration, making it easy to have your cake and eat it too — multiple separate JavaScript and CSS files for easy editing and debugging, zero time wasted combining and compressing files for use on the live site, and no hefty downloads for your visitors.

Requirements

SL Combinator utilises the splendid open source Minify application, which requires PHP5.

Installation

  1. Extract the ZIP file.
  2. Copy extensions/ext.sl_combinator_ext.php to your system/extensions folder.
  3. Copy plugins/pi.sl_combinator.php to your system/plugins folder.
  4. Copy language/english/lang.sl_combinator_ext.php to your system/language/english folder.
  5. Copy the min folder to a location of your choosing — for example, a utils folder in the root of your site.
  6. Ensure that the min/cache folder is writeable, by setting its permissions to 755.
  7. Open the Extensions Manager, and enable SL Combinator.

Configuration

The SL Combinator extension requires a single setting in order to function correctly; the URL of the min folder that you uploaded during step 5 of the Installation.

To simplify the process of moving your site between development, staging, and live servers, you may find it easier to enter an absolute URL. For example: /utils/min/.

Usage

To combine and compress your JavaScript or CSS files, simply wrap them in the SL Combinator plugin tag. As per the examples below, SL Combinator works best with relative or absolute URLs.

The following code combines and compresses 3 JavaScript files.

{exp:sl_combinator:combine_js disable="no" debug="yes"}
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/lib/jquery.easing.js"></script>
<script type="text/javascript" src="/js/custom/contact.js"></script>
{/exp:sl_combinator:combine_js}

And here’s how to do the same for CSS files (note that only the <link> method of importing CSS is supported).

{exp:sl_combinator:combine_css disable="no" debug="no"}
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/basic.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/fancy.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="../css/schmancy.css" />
{/exp:sl_combinator:combine_css}

SL Combinator won’t allow you to combine CSS files intended for different media. If it suspects that you’re attempting such madness it does the sensible thing, and ignores your request completely.

Parameters

Setting the disable parameter to yes or true disables the plugin. This can be particularly handy during development, as it enables you to temporarily disable the effects of the plugin, without removing all the plugin code from your templates — one simple find-and-replace, and you’re done.

Setting the debug parameter to yes or true causes line numbers to be written to the output file as comments.

Support

Support is provided via this thread on the ExpressionEngine forums.

License

SL Combinator is made available under a Creative Commons Attribution-Share Alike 3.0 Unported License.

2.1.0
  • Implemented LG Addon Updater functionality, to automatically check for updates.
2.0.1
  • Finally got around to adding a changelog, huzzah!
  • Made minor change to minify path to explicitly include index.php. Prevents problems on some servers that use the “Include” method for removing index.php from URLs.

Need a custom ExpressionEngine addon?
Find out about our ExpressionEngine development services.

EE addons

Other goodies

Copyright © Experience Internet. The header background image is part of Sink or Swim, copyright © Michel Keck.