1. REGISTER SCRIPTS
2. REGISTER CSS
3. OPTIONAL COMPRESSION

REGISTER SCRIPTS ¶

First of all, we need to download the jQuery library and store it in the js folder. In this example we are using the version 2.1.3.

Then, we write this in the config > main.php:

'components'=>array(
	'clientScript'=>array(
	  'packages'=>array(
	    'jquery'=>array(
	      'baseUrl'=>'js',
	      'js'=>array('jquery-2.1.3.min.js'),
	      'coreScriptPosition'=>CClientScript::POS_END
	    ),
	  ),
	),
 )

Next, we register the core script in the following way:

Yii::app()->clientScript->coreScriptPosition=CClientScript::POS_END;
Yii::app()->clientScript->registerCoreScript('jquery');

To register jQuery scripts we do this:

Yii::app()->clientScript->registerScript('myjquery', '
	$(\'#mybutton\').click(function(){
		$(\'#mydiv\').slideUp();
	})
');

However, to register raw JavaScripts (like Google Analytics), we must add "CClientScript::POS_END":

Yii::app()->clientScript->registerScript('myjavascript', '
	  var _gaq = _gaq || [];
	  _gaq.push([\'_setAccount\', \'UA-33795997-4\']);
	  _gaq.push([\'_trackPageview\']);
	
	  (function() {
	        var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
	        ga.src = \''. Yii::app()->baseUrl . '/js/ga.js\';
	        var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	', CClientScript::POS_END);

Finally, if we want to register script files we do this:

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/myscriptfile.js', CClientScript::POS_END);

REGISTER CSS ¶

To register CSS we do this:

Yii::app()->clientScript->registerCss('mycss', '
     p
     {
       color: pink;
     }
');

If we want to register CSS files we do this:

Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . '/css/mycssfile.css');

OPTIONAL COMPRESSION ¶

We can compress the JS and CSS simply by modifying the CClientScript core file, located at framework/web/CClientScript.php

public function registerScript($id,$script,$position=null,array $htmlOptions=array())
{
	if(!YII_DEBUG)
	{
		require_once "JSMin.php";
		$script = JSMin::minify($script);
	}
//...
}

public function registerCss($id,$css,$media='')
{
	if(!YII_DEBUG)
		$css = $this->compressCSS($css);
//...
}

You can find JSMin here: https://github.com/rgrove/jsmin-php

This is the function to compress CSS:

public function compressCSS($buffer)
{
	// Remove comments
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
	// Remove space after colons
	$buffer = str_replace(': ', ':', $buffer);
	// Remove whitespace
	$buffer = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
	
	return $buffer;
}