A CodeIgniter library for loading CSS & JS assets from a manifest file supporting different environments with an optional cache busting mechanism. You can also specify assets for Internet Explorer instead of using conditional CSS & JS.
- Download and extract to your CodeIgniter libraries directory
- Either autoload the library or explicitly load it in your controllers
- Define your asset manifest file for your environments and optionally provide default assets for all environments
- Replace the css link & script tags with
<?php $this->assetload->queue(); ?>in your template head section - Enjoy the sanity that follows! :)
AssetLoad::queue($cache_bust = false, $manifest_file_name = 'assets.ini', $manifest_path = 'assets/')Your manifest file should be called assets.ini and placed inside your parent assets directory: /assets/assets.ini
; Asset loader manifest file
[defaults]
css[] = "css/reset.css"
js[] = "js/html5shiv.min.js"
[ie6]
css[] = "css/chromeframe.css"
js[] = "js/chromeframe.js"
[ie7]
css[] = "css/paddingfix.css"
js[] = "js/chromeframe.js"
[development]
css[] = "css/application.css"
js[] = "js/vendor/modernizr-2.6.2.min.js"
js[] = "js/vendor/raphael-min.js"
js[] = "js/plugins.js"
js[] = "js/debugger.js"
[production]
css[] = "css/compiled.css"
js[] = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"
js[] = "js/compiled.js"
[testing]
css[] = "css/application.css"
js[] = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"
js[] = "js/vendor/modernizr-2.6.2.min.js"
js[] = "js/vendor/raphael-min.js"
js[] = "js/plugins.js"
js[] = "js/application.js"
To insert script tags having different attributes you can use following syntax:
js[] = ["src => http://code.jquery.com/jquery-2.1.1.min.js", "async => true"]
js[] = ["src => js/application.js", "id => main-script"]
The loader assumes all your assets are contained in child directories within the /assets directory in your project root, but you can change this
by specifying the parent asset directory as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Your title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<?php $this->assetload->queue(false); ?>
</head>If you wish to enable cache-busting by automatically adding a timestamp to include paths in production or testing environments, simply change the first argument to the queue() method to true
as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Your title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<?php $this->assetload->queue(true); ?>
</head>It is possible to load different manifest files within a single project. A good example would be if you are running a website and a dashboard/app from one framework installation. Here's how to do to:
In the website header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<?php $this->assetload->queue(false, 'website.ini'); ?>
</head>In the application/dashboard header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<?php $this->assetload->queue(false, 'dashboard.ini'); ?>
</head>- Wildcard lazy-loader
- Resolve all issues