I know that it’s good to minify assets because doing so reduces their file size, which reduces the amount of time it takes for the page to load. I also know that it’s good to combine assets because doing so reduces the number of HTTP requests, which, once again, reduces the amount of time it takes for the page to load. This is important because there are still people on dial-up and mobile devices often don’t have a fast connection.
The thing I’m struggling with is how to easily add asset minification and combining into my workflow. I develop locally using CakePHP and I use Git for version control. When it’s time to go live, I ssh into the server hosting the live site and merge in the latest commit.
Here’s how I would go about rolling my own solution (only accounts for minification and is not tested!):
1.) My development environment’s “app/Config/core.php” file would always have its “debug” level set to a value greater than 0 and the production environment’s would always be at 0.
2.) On the file system, all CSS and JavaScript would be stored in external files, like so:
- app/webroot/css/used-site-wide.css
- app/webroot/css/used-on-a-few-pages.css
- app/webroot/css/used-on-one-page.css
- app/webroot/js/used-site-wide.js
- app/webroot/js/used-on-a-few-pages.js
- app/webroot/js/used-on-one-page.js
3.) Rather than using echo $this->Html->script(array('used-on-a-few-pages', 'used-on-one-page'), array('inline' => false)); in the view file, I would use this:
Configure::write('external_js', array('used-on-a-few-pages'));
Configure::write('inline_js', array('used-on-one-page'));
4.) Rather than using echo $this->fetch('script'); in the layout file, I would use this:
if (Configure::read('external_js') !== null) {
$external_js = Configure::read('external_js');
if (Configure::read('debug') == 0) {
foreach ($external_js as &$external_js_filename) {
$external_js_filename .= '-min';
}
}
echo $this->Html->script($external_js);
}
if (Configure::read('inline_js') !== null) {
$inline_js = Configure::read('inline_js');
if (Configure::read('debug') == 0) {
foreach ($inline_js as &$inline_js_filename) {
$inline_js_filename .= '-min';
}
}
echo "\n<script type=\"text/javascript\">\n\t/* <![CDATA[ */";
foreach ($inline_js as $inline_js_filename) {
echo file_get_contents(JS . Configure::read('inline_js') . '.js');
}
echo "\n\t/* ]]> */\n</script>";
}
5.) Finally, I would set up Git to create the minified assets whenever a commit is made.
Using this setup, I would be working with the unminified assets in development and the minified ones in production. The thing is, I don’t want to re-invent the wheel if I don’t have to. I believe that re-inventing the wheel should only be done if you’re solving a problem that is both significant and uncommon.
How do you all handle this?
Thanks!
If you’re after something more simple than Mark Story’s AssetCompress plugin, check this out:
https://github.com/joshuapaling/CakePHP-Combinator-Plugin
It will combine and minify JS and CSS files, and you can easily make it only combine/minify when debug mode is 0 (there’s a example of that in the .markdown on GitHub). It uses the date modified of the included JS/CSS files to decide when it needs to make a new cached file.
It isn’t nearly as full-featured as Mark Story’s plugin, but it is simple, does the job, and it should only take you 10 or 15 mins to set up.