PHP minifying libraries (Minify_Css_Compressor , JSMin) are taken from Stephen Clay's Minify project - http://code.google.com/p/minify/
|Total Size||frontend js||frontend css||backend js||backend css|
|no minification||359.6 KB||105.9 KB||627.1 KB||107.6 KB|
|YUICompressor||205.7 KB||85.9 KB||340.9 KB||80.4 KB|
|php classes||255.1 KB||86.3 KB||413.5 KB||81.2 KB|
$ cd /path/to/magento $ modgit init $ modgit -e README.md clone magento-minify git://github.com/azurams/Magento-Minify.git
Install with modman:
$ cd /path/to/magento $ modman init $ modman clone WBL_Minify git://github.com/azurams/Magento-Minify.git
Download package manually:
- Download latest version here
- Unzip in Magento root folder
- Clean cache
Log-out then Log-in in magento backend, go to System > Configuration > Developer > Minification Settings. Then flush media/js and media/css files... and that's it !
NEW LESS support
Ability to compile less files with lessphp and adds the less.js if merging is disabled.
Adding a .less file to your scripts is easy:
<layout> <default> <reference name="head"> <action method="addItem"><type>skin_css</type><stylesheet>less/responsive.less</stylesheet></action> </reference> </default> </layout>
NEW Grouping files functionality
How does it work?
The js and css files are normally combined to one large file, with this you can group them in relevant groups (the product page gets its own group for example). More examples:
<layout> <!-- we add a group specifically for each locale, when customers are switching a language the whole css doesn't need to be reloaded --> <default> <reference name="head"> <action method="addItem"><type>skin_css</type><stylesheet>less/responsive.less</stylesheet><params/><if/><cond/><group>locale</group></action> <!-- not the the <params/>, <if/> and the <cond/>, those are required. --> </reference> </default> <!-- on the product page we include the js in a different group (given the same name as the handle) --> <catalog_product_view> <reference name="head"> <action method="addJs"><script>varien/product.js</script><params/><group>catalog_product_view</group></action> <!-- addCss works the same, addCssIe and addJsIe work the same --> </reference> </catalog_product_view> </layout>