Jack of All Trades Web Development

CakePHP, PHP

Released my CakePHP Asset Mapper. I've always wanted an easier way to control my JavaScript and CSS includes and this is the solution I came up with. Controls the entire web application's includes in one file!

Here is an example of a mapping rule:

$this->AssetRule->create(); 
$this->AssetRule->compact->css = array('site','global'); 
$this->AssetRule->compact->scripts = array('jquery', 'ui.datepicker'); 
$this->AssetRule->runRule(); 

Accross the entire site, this would compact the site.css and global.css files together and run them through CSS Tidy. jQuery.js and ui.datepicker.js would be compacted together and then ran through JSMin.

Great, this simplifies a complex process of compacting and minimizing - while still giving you the freedom to include scripts normally. Compacting lowers the amount of http requests you website makes, increasing website performance. JSMin and CSS Tidy strip comments and whitespace leaving your files much smaller in size.

You can create a rule to include files in a specific controller and/or action with AssetRule->map and AssetRule->controller:

$this->AssetRule->create(); 
$this->AssetRule->map->controller = 'posts';
$this->AssetRule->map->action = 'admin_add';
$this->AssetRule->compact->css = array('user'); 
$this->AssetRule->runRule(); 

This would only include your 'user.css' file in the, 'posts' controller - with the action, 'admin_add'. The css file would be compacted with the others.

Some scripts like TinyMCE, include other files (so it can't be compacted with the others) and requires a codeblock to be initialized. This configuration satisfies TinyMCE:

$this->AssetRule->create(); 
$this->AssetRule->map->action = 'admin_edit'; 
$this->AssetRule->scripts = array('tiny_mce/tiny_mce'); 
$this->AssetRule->codeblock = 'tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "media", 
    media_external_list_url : "media/list.js", 
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,outdent,indent,redo,link,unlink", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_resizing : true, 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" 
});'; 
$this->AssetRule->runRule(); 

Coming from a heavy UI developer background, I can afford to be incredibly anal when managing my CSS and JavaScript files. I hope this saves you time, frustration and makes your developer-life better.

Comments

• #1. grEvenX on Jan 16 2008

  What if you want to include CSS files from other sources that your own, say the Ext javascript framework which references images in a particular path.
  How would you go abouts fixing that if you still want to pack it all together as a single CSS file?

• #2. Marc on Jan 18 2008

  Interesting idea. I'm sure it would not be too difficult. I will take note of it as a feature request. Thanks for the idea!

Post a Comment!