Kirby - KRB, minify and combine your assets on the fly

[1n3JgKl9pQ6cUMrW]

Kirby - KRB

Version 1.0.0 - 2016-07-08

• Initial Public Offering.

Version 1.1.0 - 2016-07-09

• Better debug options.
• Option to defer and async the minified js-output (config.php).

---

What is it?

Kirby - KRB minifies and combines all assets (both Javascript and Style Sheets) on the fly in one, compressed file.

It uses the excellent minifying library of GitHub - matthiasmullie/minify: CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

• Less http-requests, good for SEO performance.
• Less bits and bytes to download.
• Version control.
• Extended debugging options.
• Several MIME-types, one syntax.
• …and more!

More info about Kirby can be found at http://getkirby.com

Installation

• Download the .zip and extract it to the root of your site.
• Don’t know which files? Just use /site/plugins/krb/.
• Optionally you can configure some settings in site/config/config.php.

Usage

The KRB syntax looks like the default Kirby syntax when including assets, but’s it has some differences;

  echo krb( array('assets/css/error.css',
                  'assets/css/main.css'),
            'css',
            1.2,
            true,
            true,
            true);

The krb() function takes these parameters;

• The assets to be minified / combined (array or singular).
• The file-type (css, or js).
• The version number (needed to force re-downloads of cached assets).
• Minify the assets, or not (defaults to Kirby standard way of including assets).
• Add cache-control to the query (asset.mime?v=version-number).
• Show debug-info in the console [F12].

The example above combines / minifies several CSS-assets, adds some cache-control to it and does show debug-info in the console.

  echo krb( 'assets/js/jquery.js',
            'js',
            1.4,
            false,
            true,
            true);

This example has only one file (js type) to include, version-control 1.4 attached to it and does not minify the (single) asset - while version control and debugging are active.

Wondering what all the shizzle is about? Turn on the debug-parameter, hit [F12] and you’ll see the power of minifying and combining all your assets

Config

By default, no config is needed. But you can set your preferences like the one below;

c::set('krb_html_min', false);
c::set('krb_css_path', 'assets/css/my_style.min.css');
c::set('krb_js_path', 'assets/js/my_script.min.js');
c::set('krb_js_async', false);
c::set('krb_js_defer', false);

• The first parameter also minifies your html output, which is cool - when your code is 100% correct (missing one semi-column ; can corrupt your scripts - so be careful when used).
• The next two parameters let you override the default minified / combined asset-path.
• The last two parameters let you set the async and defer option for the final, minified js-output.

###Important!###

• Like mentioned above, minifying does an excellent job with good codes; but when your (or a third-party) script is not 100% correct, it can be corrupted. Most of the time a semi-column ; is missing between the different functions.
• Also, turning on the cache or using plug-ins like cachebuster can “corrupt” the functionality of KRB.
• Be sure to test all, before combining / minifying / etc…

---

KRB - real time minifying and combining of your assets, with debugging set in config.

[anon3573533]

Thanks, useful plugin.

[1n3JgKl9pQ6cUMrW]

Thx - I am using it on about 5 Kirby sites right now, and can’t do without

It took a lot of time, and bytes, to minify / combine all assets by hand - now it’s all automated.

I hope the description / manual is clear enough.

[anon3573533]

It is!

and easier to use than grunt action (for me…)

It seems that when I make some modifications on css files, the content of first css.min is not replaced by the new one. I have to delete it first.

[1n3JgKl9pQ6cUMrW]

The last thing should not be necessary;

1. Make some changes to your unminified CSS
2. Change the versionnumber in the php-code
3. Reload the page
4. The new minified CSS (with the changes you made) will be created

So you can handle it by the versionnumber.

Also, during development, you can turn of minifying and when all is good - you can turn it on (that way you can see which script (CSS/JS) is causing issues, because you won’t see the big, minified version);

1. Turn off minifying
2. Make some changes to your unminified CSS
3. Reload the page, check if all is good
4. Change the versionnumber in the php-code / turn on minifying
5. The new minified CSS (with the changes you made) will be created

function krb($assets, $type, $version, $minify, $cache, $debug) {}

See the options above, which the function takes;

1. Assets (array or single)
2. Type (css or js)
3. Versionnumber (integer)
4. Minify, or not (true / false)
5. Cache parameter (true / false)
6. Debug (true / false - F12 to see)

[anon3573533]

Thank you for infos

[1n3JgKl9pQ6cUMrW]

You’re welcome - I’ll update it today with some minor fixes.

[1n3JgKl9pQ6cUMrW]

Updated tot version 1.1 - now defer and async are supported as well.

[REH]

This plugin is awesome!!!
Super easy to set up, simple configuration and testing, version control and fast!

I got 5 less server requests, a total page-size reduction and a performance grade A98 on [pingdom] (tools.pingdom.com) and Mobile 85 / Dektop 95 on Google PageSpeed Insights (the only “complaint” left is to “Eliminate render-blocking JavaScript and CSS in above-the-fold content”).

Thanks a lot!

[1n3JgKl9pQ6cUMrW]

You’re welcome

I made the “plug-in” for the same reasons, like you - speeding up the load-time and getting better score from PageSpeed sites

My client wanted a “prove” that Kirby was faster than WordPress - so I coded this little plug-in… it’s not quite a proof, 'cause you can do the same thing with WP - but my client was happy with it (and so was I).

[isaactopo]

Awesome. Thanks man. Can I pay you a beer?

[1n3JgKl9pQ6cUMrW]

You can send it to @bastianallgeier

[carstengrimm]

is this plugin also working with external js/css files, as well as at some point with ‘@auto’?

[1n3JgKl9pQ6cUMrW]

You mean like a CDN, or something?

I don’t know - just check it out

(can’t do you any harm, when in a developers environment / set-up)

[carstengrimm]

nah, external files as well as @auto didn’t work for me.

[starckio]

For “@auto”:

<style>
<?php ob_start('minify');
function minify($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);    		
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
$buffer = str_replace(array(' } ',' }','} ',';}'), '}', $buffer);
$buffer = str_replace(array(' { ',' {','{ '), '{', $buffer);
$buffer = str_replace(array(' : ',' :',': '), ':', $buffer);
return $buffer; }
include('assets/css/main.css');
if($page->template() != 'default'){
	include('assets/css/templates/' . $page->template() . '.css');
}
ob_end_flush(); ?>
</style>

[tojai]

Hi Jens, why do you discontinue the development? Enough solutions around?

[pixelijn]

The plugin was created by someone who left the community (or at least does no longer work with Kirby/develop plugins), it is still available here but no longer developed. Feel free to take it over and continue development.

[eXpl0it3r]

In case someone comes across this plugin, I’ve restructered the plugin for use as git submodule and updated the used libraries (Minify and PathConverter): https://github.com/eXpl0it3r/kirby-krb

[carstengrimm]

i am using the plugin, those library updates increase performance or make it more compatible (with minifying)? since i am having issues with one JS where if i use minification it’ll break the file…