17 4 / 2011
EE Addon: HTML/CSS/JavaScript Optimization with AutoMin
What is AutoMin?
AutoMin is an ExpressionEngine addon that automatically combines and compresses your template output, CSS and JavaScript code.
Features
- On-the-fly combination and minification of your CSS/JavaScript
- Intelligent caching mechanism detects when you’ve made a change to your tags or files
- Automatic compression of your HTML markup
- Handles CSS @import and @font-face with ease
- Support for EE’s global variables, path variables, and {stylesheet} variables
- Reports file size differences to the template debugger
- Basic support for EE 1.X
EE 2.X Installation Instructions
- Download and unzip the latest version of AutoMin from my repository.
- Create a folder called automin in your site’s web root and make sure it’s writeable by PHP. In most cases, you’ll need to assign it 777 permissions.
- Copy the automin directory from the unzipped source code into your /system/expressionengine/third_party/ directory.
- Login to EE. Install the module by navigating to Addons->Modules and clicking the “Install” link next to AutoMin.
- Insert the AutoMin tags into your template.
- AutoMin will combine each of the files in order and compress the code, outputting a single <link> or <script> tag for the output.
Enabling Template Output Compression (EE 2 Only)
- After installing the AutoMin module, you’ll need to install a hook that compresses your template output.
- Copy the hooks/automin.php file from the AutoMin download to your /system/expressionengine/hooks directory.
- Open your /system/expressionengine/config/config.php file and make line 119 read like this:
$config['enable_hooks'] = TRUE;
- Make sure Compress HTML Markup is set to Yes in the AutoMin settings page.
EE 1.X Installation
ExpressionEngine 1.X has basic support for AutoMin. With the EE 1 version, you get the core combine and compress abilities and the template tag syntax is the same. However, new features will not be added to the EE 1 version of the plugin. To install, simply copy the pi.automin.php file in the source code download to your system/expressionengine/plugins directory.
Examples
AutoMin will replace your existing CSS and JavaScript tags with a single tag containing the path to the combined/compressed code. AutoMin allows you to customize the rendered tag any way you want by including the attributes as parameters. Here’s an example for both CSS and JavaScript:
Using this code:
{exp:automin:css type="text/css" title="default" rel="stylesheet" media="screen, projection"}
<link href="/css/core.css" type="text/css" title="default" rel="stylesheet" media="screen, projection">
<link href="/css/design.css" type="text/css" title="default" rel="stylesheet" media="screen, projection">
{/exp:automin:css}
Will Return:
<link href="/automin/55ed34446f3eac6f869f3fe5b375d311.css" type="text/css" title="default" rel="stylesheet" media="screen, projection">
Using this code:
{exp:automin:js type="text/javascript"}
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.ui.js"></script>
<script type="text/javascript" src="/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/js/jquery.regex.js"></script>
<script type="text/javascript" src="/js/jquery.regex.js"></script>
<script type="text/javascript" src="/js/cufon.js"></script>
<script type="text/javascript" src="/js/global.js"></script>
{/exp:automin:js}
Will return:
<script src="/automin/7dc66e1b2104b40a9992a3652583f509.js" type="text/javascript"></script>
As you can see, any parameter passed to AutoMin will be returned with the resulting output.
Support
If you’re having issues, feel free to leave a post over at Get Satsifaction. I’ll help you out in any way I can.
Links
Permalink 6 notes
