Agile Web Application Development with Yii 1.1 and PHP5

Introduction

Yii FrameworkProbably a lot of you would wonder why, having so many good extensions related to minifying/compressing/packing your javascript code and your css files at the Yii Extensions Repository, here comes this guy offering us another solution.

I did check out all the extension in our repository, just to name some of them:

All of them are great, but none were filling the requirements we had. I did not have any issue compressing all our files as our team, will use the YUI compressor jar file to create our compressed javascript versions and then use the wonderful mapping features of CClientScript. The issue was with the assets of external, or own developed, extensions and the javascript code that, even Yii own widgets, were writing to the POS_BEGIN, POS_END, POS_HEAD, POS_LOAD, POS_READY positions. Thats exactly what this library is doing: allowing Yii coders to minify those scripts.

I have created a GitHub repository for those willing to contribute on any of the extensions I created. Please, check the link at the bottom of this wiki.

Library

The library comes with three flavors:

  • EScriptBoost Component
  • EClientScriptBoost Extension
  • AssetManagerBoost Extension

EScriptBoost Component

This is a very easy to use component to compress your Javascript or CSS code at your will. The minifiers used are:

Usage

// this is a very simple example :)
// we use cache as we do not want to
// compress/minify all the time our
// script
$js = Yii::app()->cache->get('scriptID');
if(!$js)
{
     $cacheDuration = 30;
     $js = <<<EOD
     // my long and uncompressed code here
EOD;
     // $js = EScriptBoost::packJs($js);
     // $js = EScriptBoost::minifyJs($js, EScriptBoost::JS_MIN_PLUS);
     $js = EScriptBoost::minifyJs($js, EScriptBoost::JS_MIN);
     // see Cache guide for more options | dependencies
     Yii::app()->cache->set('scriptID', $cacheDuration);
}
Yii::app()->clientScript->registerScript('scriptID', $js);

That was troublesome right? No worries, if you don’t really care about using JS_MIN, or JS_MIN_PLUS, you can use its helper function registerScript, it will handle all of the above automatically:

$js = <<<EOD
    // my long and uncompressed code here
EOD;
EScriptBoost::registerScript('scriptID', $js);

EClientScriptBoost Extension

EScriptBoost was good for the javascript code written by me but what about the ones written by Yii widgets?EClientScriptBoost was developed to solve that:

Usage

On your main.php config file:

'import' => array(
// ... other configuration settings on main.php
// ... importing the folder where scriptboost is
    'application.extensions.scriptboost.*',
// ... more configuration settings
    ),
// ... other configuration settings on main.php
'components' => array(
     'clientScript' => array(
// ... assuming you have previously imported the folder
//     where EClientScriptBoost is
         'class'=>'EClientScriptBoost',
         'cacheDuration'=>30,
// ... more configuration settings

Done! now, every time you or other component on your application will be minified and cached as you specify on your cache settings. Easy right?

EAssetManagerBoost Extension

But there was one more challenge to solve. Some extensions, widgets, etc, do publish a whole bunch of files in our assets that are not minified. This is where EAssetManagerBoost comes handy.

This extension does only minify javascript/css files, and also makes sure that the, about to be compressed, file do not match any of its $minifiedExtensionFlags so minified/compressed files are not processed at all.

Usage

Make sure you have deleted your previous assets folder contents.

'import' => array(
// ... other configuration settings on main.php
// ... importing the folder where scriptboost is
    'application.extensions.scriptboost.*',
// ... more configuration settings
    ),
// ... other configuration settings on main.php
'components' => array(
    'assetManager' => array(
// ... assuming you have previously imported the folder
      'class' => 'EAssetManagerBoost',
      'minifiedExtensionFlags'=>array('min.js','minified.js','packed.js')
        ),
// ... more configuration settings

Important Note There is a small drawback to use EAssetManagerBoost and is that, the first time your application is requested, it will take a bit of time as it will go throughout all your asset files to be published and minify them.

Resources



Tweet this!Tweet this!