CakePHP Asset Mapper - Pack and Manage Includes

Email Linked In RSS Feed

CakePHP Asset Mapper

CakePHP Logo

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

Install Instructions

  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.

Example of Using Asset Mapper (asset_mapper.php)

PHP:
  1. /* Define Rules
    2. 

  2. * 
    3. 

  3. * STEP 1: Create a new rule.
    4. 

  4. * $rule = new $this->AssetRule();
    5. 

  5. * 
    6. 

  6. * STEP 2: Set the rule properties.
    7. 

  7. * controller        : Map assets to a controller
    8. 

  8. * action            : Map assets to an action
    9. 

  9. * compact->css          : CSS files to compact and compress with CSS Tidy
    10. 

  10. * compact->scripts      : Scripts to compact into one file and minify with JS Min
    11. 

  11. * scripts               : Include scripts
    12. 

  12. * codeblock         : Include a codeblock
    13. 

  13. * 
    14. 

  14. * STEP 3: Render the rule.
    15. 

  15. * $rule->render();  
    16. 

  16. * 
    17. 

  17. * @note: If no controller or action is set, then the files are included site-wide
    18. 

  18. * @note: The compacted scripts get rendered first, then the regular scripts and then lastly the codeblocks
    19. 

  19. * */
    20. 

  20.  
    21. 

  21. //EXAMPLE:
    22. 

  22. $this->AssetRule->create(); 
    23. 

  23. $this->AssetRule->compact->css = array('site'); 
    24. 

  24. $this->AssetRule->compact->scripts = array('jquery', 'ui.datepicker'); 
    25. 

  25. $this->AssetRule->runRule(); 
    26. 

  26.  
    27. 

  27. //EXAMPLE:
    28. 

  28. $this->AssetRule->create(); 
    29. 

  29. $this->AssetRule->action = 'admin_edit'; 
    30. 

  30. $this->AssetRule->scripts = array('tiny_mce/tiny_mce'); 
    31. 

  31. $this->AssetRule->codeblock = 'tinyMCE.init({ 
    32. 

  32. mode : "textareas", 
    33. 

  33. theme : "advanced", 
    34. 

  34. plugins : "media", 
    35. 

  35. media_external_list_url : "media/list.js", 
    36. 

  36. theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,outdent,indent,redo,link,unlink", 
    37. 

  37. theme_advanced_buttons2 : "", 
    38. 

  38. theme_advanced_buttons3 : "", 
    39. 

  39. theme_advanced_resizing : true, 
    40. 

  40. theme_advanced_toolbar_location : "top", 
    41. 

  41. theme_advanced_toolbar_align : "left", 
    42. 

  42. theme_advanced_statusbar_location : "bottom", 
    43. 

  43. 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]" 
    44. 

  44. });'; 
    45. 

  45. $this->AssetRule->runRule();    
    46. 

  46.  
    47. 

  47. //EXAMPLE:
    48. 

  48. $this->AssetRule->create();
    49. 

  49. $this->AssetRule->compact->css = array('site');
    50. 

  50. $this->AssetRule->compact->scripts = array('jquery');
    51. 

  51. $this->AssetRule->runRule();
    52. 

  52.  
    53. 

  53. //EXAMPLE:
    54. 

  54. $this->AssetRule->controller = 'properties';
    55. 

  55. $this->AssetRule->action = array('edit_details','edit_photos');
    56. 

  56. $this->AssetRule->scripts = array('controller/properties/edit');
    57. 

  57. $this->AssetRule->runRule();

Example View (Template)

Html:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. 

  2. "http://www.w3.org/TR/html4/strict.dtd">
    3. 

  3. <html>
    4. 

  4. <head>
    5. 

  5. <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />    
    6. 

  6. <title><?php echo $title_for_layout?></title>
    7. 

  7. <?php echo <strong>$styles_for_layout</strong> ?>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <?php $session->flash() ?>
    11. 

  11. <?php echo $content_for_layout ?>
    12. 

  12. <?php echo <strong>$javascript_for_layout</strong> ?>
    13. 

  13. </body>
    14. 

  14. </html>

Need more help or have comments?

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

More Reading

Blog post introducing CakePHP Asset Mapper

Bakery Article on CakePHP Asset Mapper