Welcome Guest, Not a member yet? Register   Sign In
Du_BundleFu - Simple CSS and JavaScript file bundling
#1

[eluser]Unknown[/eluser]
Du_BundleFu is PHP 5.3+ library which bundles multiple css/javascript files into a big package and sends it out at once.

It is a port of the Ruby on Rails plugin bundle-fu.

In short, it turns this:
Code:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.myplugin.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/app.module.js"></script>
<link media="screen" type="text/css" href="/css/reset.css">
<link media="screen" type="text/css" href="/css/jquery.myplugin.css">
<link media="screen" type="text/css" href="/css/app.css">
<link media="screen" type="text/css" href="/css/app.module.css">

Into this:

Code:
<link type="text/css" src="/js/cache/bundle_3f84da97fc873ca8371a8203fcdd8a82.css?1234567890">
<script type="text/javascript" src="/js/cache/bundle_3f84da97fc873ca8371a8203fcdd8a82.css?1234567890"></script>


Installation

1. Install the Du_BundleFu library. This can be done via PEAR:

Code:
pear channel-discover pear.dotsunited.de
pear install dotsunited/Du_BundleFu-beta

2. Place bundle_fu_helper.php in system/application/helpers and load the helper inside your controllers:

Code:
$this->load->helper('bundle_fu');

Alternatively you can autoload it during system initialization by adding it to application/config/autoload.php:

Code:
$autoload['helper'] = array('bundle_fu');

3. The bundle files will be stored under your document root (where the index.php is located). The css bundles in [document_root]/css/cache and the javascript files in [document_root]/js/cache. You should create these folders and make them writable by PHP.

Usage

The helper captures <link> and <script> tags in your views and bundles them. To capture, surround the tags with a start() and a end() call:

Code:
<?php bundle_fu()->start(); ?>

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.myplugin.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/app.module.js"></script>
<link media="screen" type="text/css" href="/css/reset.css">
<link media="screen" type="text/css" href="/css/jquery.myplugin.css">
<link media="screen" type="text/css" href="/css/app.css">
<link media="screen" type="text/css" href="/css/app.module.css">

<?php bundle_fu()->end(); ?>

Capturing can be done as often as you want.

To output the tags for the bundles, simply call render():

Code:
<?php echo bundle_fu()->render(); ?>

This will output something like this:

Code:
<link type="text/css" src="/js/cache/bundle_3f84da97fc873ca8371a8203fcdd8a82.css?1234567890">
<script type="text/javascript" src="/js/cache/bundle_3f84da97fc873ca8371a8203fcdd8a82.css?1234567890"></script>

You can also output the <link> and <script> tags separately:

Code:
<?php echo bundle_fu()->renderCss(); ?>
<?php echo bundle_fu()->renderJs(); ?>

If you want to output a XHTML compliant tags, do:

Code:
<?php bundle_fu()->setRenderAsXhtml(true); ?>

before you call any render*() method.


Notes

- Du_BundleFu automatically detects when a bundled file has changed and regenerates the bundle.
- All content inside of start() and end() will be lost. Be sure to only put css / js includes inside of the block.
- External dependencies via querystring loading will not work:

Code:
<script src="/js/scriptaculous.js?load=effects,controls" type="text/javascript"></script>

Instead, you'll need to include each javascript file as normal.

- Scripts / stylesheets are detected by parsing the output and looking for include files. HTML comments are ignored, so if you comment out a script like this:

Code:
<!-- <script src="/js/script.js" type="text/javascript"></script> -->

the comment will be ignored and the file will be bundled anyways. Be sure to comment out via PHP:
Code:
<?php /* <script src="/js/script.js" type="text/javascript"></script> */ ?>


Happy bundling!
#2

[eluser]Bainzy[/eluser]
sounds like a good library Smile will check this out when i get time to ... thank you !
#3

[eluser]eoinmcg[/eluser]
ooo! that could be very useful.

thanks for sharing.
#4

[eluser]ghprod[/eluser]
Hi this is really cool..so we can minimize HTTP header request Big Grin

Thanks




Theme © iAndrew 2016 - Forum software by © MyBB