CakePHP Asset Mapper - Pack and Manage Includes

CakePHP Asset Mapper is a manager for JavaScript and CSS includes. You can manage your includes site-wide from one file.

The files are put through JSMin and CSS Tidy. Packing the files is built on Matt Curry's Asset Packer.

Download CakePHP Asset Mapper

1. Have a running installation of CakePHP (v1.2).
2. Download CakePHP Asset Mapper
3. Unpack asset files in new folder called, "asset" in helpers folder /app/views/helpers/asset/
4. Unpack css_tidy and jsmin to vendors folder /vendors/
5. Include AssetMapper Helper in your App Controller /app/controller/app_controller.php
6. Define Mapper Rules in Asset Map file /app/views/helpers/asset/asset_map.php
7. Output the CSS and JavaScript files in your view using $styles_for_layout and $javascript_for_layout variables.

Note that Asset Mapper will only be enabled when debug is set to 0. See developmentMode in asset_mapper.php.

/* Define Rules
* 
* STEP 1: Create a new rule.
* $rule = new $this->AssetRule();
* 
* STEP 2: Set the rule properties.
* controller		: Map assets to a controller
* action			: Map assets to an action
* compact->css			: CSS files to compact and compress with CSS Tidy
* compact->scripts		: Scripts to compact into one file and minify with JS Min
* scripts				: Include scripts
* codeblock			: Include a codeblock
* 
* STEP 3: Render the rule.
* $rule->render();  
* 
* @note: If no controller or action is set, then the files are included site-wide
* @note: The compacted scripts get rendered first, then the regular scripts and then lastly the codeblocks
* */

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

//EXAMPLE:
$this->AssetRule->create(); 
$this->AssetRule->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();    

//EXAMPLE:
$this->AssetRule->create();
$this->AssetRule->compact->css = array('site');
$this->AssetRule->compact->scripts = array('jquery');
$this->AssetRule->runRule();

//EXAMPLE:
$this->AssetRule->controller = 'properties';
$this->AssetRule->action = array('edit_details','edit_photos');
$this->AssetRule->scripts = array('controller/properties/edit');
$this->AssetRule->runRule();

PHP:

/* Define Rules
* 
* STEP 1: Create a new rule.
* $rule = new $this->AssetRule();
* 
* STEP 2: Set the rule properties.
* controller        : Map assets to a controller
* action            : Map assets to an action
* compact->css          : CSS files to compact and compress with CSS Tidy
* compact->scripts      : Scripts to compact into one file and minify with JS Min
* scripts               : Include scripts
* codeblock         : Include a codeblock
* 
* STEP 3: Render the rule.
* $rule->render();  
* 
* @note: If no controller or action is set, then the files are included site-wide
* @note: The compacted scripts get rendered first, then the regular scripts and then lastly the codeblocks
* */
 
//EXAMPLE:
$this->AssetRule->create(); 
$this->AssetRule->compact->css = array('site'); 
$this->AssetRule->compact->scripts = array('jquery', 'ui.datepicker'); 
$this->AssetRule->runRule(); 
 
//EXAMPLE:
$this->AssetRule->create(); 
$this->AssetRule->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();    
 
//EXAMPLE:
$this->AssetRule->create();
$this->AssetRule->compact->css = array('site');
$this->AssetRule->compact->scripts = array('jquery');
$this->AssetRule->runRule();
 
//EXAMPLE:
$this->AssetRule->controller = 'properties';
$this->AssetRule->action = array('edit_details','edit_photos');
$this->AssetRule->scripts = array('controller/properties/edit');
$this->AssetRule->runRule();

	

$styles_for_layout ?>


flash() ?>

$javascript_for_layout ?>

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
<title><?php echo $title_for_layout?></title>
<?php echo <strong>$styles_for_layout</strong> ?>
</head>
<body>
<?php $session->flash() ?>
<?php echo $content_for_layout ?>
<?php echo <strong>$javascript_for_layout</strong> ?>
</body>
</html>

Email Marc Grabanski (m@marcgrabanski.com) "CakePHP Asset Mapper" in the subject.

Blog post introducing CakePHP Asset Mapper

Bakery Article on CakePHP Asset Mapper