Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
28 posts Page 1 of 3
Minify Tag
This tag will combine and minimize CSS or JS files. It concatenates and minimizes files into a single output file, and renders a <script> or <link> tag to call it.
Code: Select all
    <cms:minify 'css' into='css/style.min.css'>
        css/bootstrap.css
        css/bootstrap-theme.css
        css/custom.css
    </cms:minify>

    <cms:minify 'js' as='js/script.min.js'>
        js/jquery.js
        js/bootstrap.js
        js/bootstrap-plugin.js
        js/custom.js
    </cms:minify>

Parameters
filetype
'css' or 'js'

output_file
The single combined file that will be served to the page. Should be relative to the site's root. You can use any parameter name you want for the output file. Both of the above tags work the same. If you don't specify an output file, the tag renders the output inline with a <style> or <script> tag.
Code: Select all
    <cms:minify 'css'>
        css/bootstrap.css
        css/bootstrap-theme.css
        css/custom.css
    </cms:minify>

attributes
Any additional parameters after the output file name will pass through to the rendered tag.
Code: Select all
<cms:minify 'css' into='css/style.min.css' media="only screen and (min-width: 800px)" >

If you wish to add an attribute to inline js or css, you must explicitly declare the empty output filename in it's proper order.
Code: Select all
<cms:minify 'js' as='' defer='defer'>

Usage
The <cms:minify> tag combines and minimizes all files in the list in the order given, storing the result in an external file. It renders a <script> or <link> tag that includes a timestamp for cache control. If you don't specify an output file, the minimized code will be rendered inline.

The minimized file only gets updated when the last modification date of included files is newer than the current output file, i.e. when you make changes. So it doesn't create a new file with every single page load. Delete the output file in order to force update.

Remember that relative urls in your CSS or JS files (like fonts or background images) will now be relative to the new, minimized file. Or to the web page if rendered inline.

Note:
In order to write the new output file, your server must have allow_url_fopen enabled. If you get an empty output file - and you haven't made any mistakes with your file list - add `allow_url_fopen=1` to your php.ini file, or contact your host for help.

Installation:
To use the tag, unzip the attached folder into /couch/addons/ and enable it in your kfunctions.php file:
Code: Select all
   require_once( K_COUCH_DIR.'addons/minify-js-css/minify.php' );


Thanks to @cl for the idea for this tag and for help with testing and debugging. If you don't already have a build process to pre-process your files, this is a convenient Couch-based utility for serving external files.

Attachments

THANK YOU TIM !!!!! :D
have a problem with this solution:

Image

in result have this message:

Image

maybe with CSS will be same, not tested
Andrej, tag parameters are strings if put in single quotes. Double quotes allow tags in parameters.
no, same

Image
@andrejprus,
All file names must be relative to the site root. Couch tags won't work in the file list.
Code: Select all
<cms:minify 'js' as='js/script.min.js'>
   js/jquery.min.js
   js/bootstrap.min.js
   js/lightbox.js
   js/slick.min.js
   js/lightbox.js  //repeat
   js/custom.js
   js/loaders/pace.min.js  //watch out for relative paths in different directories
   js/loaders/blockui.min.js
</cms:minify>

This tag already adds a querystring with a timestamp. So using <cms:show k_cur_token /> on the output file will create a malformed link if it works at all.
Code: Select all
<script type="text/javascript" src="http://test.com/js/script.min.js?1505170274"></script>

Hope that helps,
Tim
understand, thank you very much !! great module
Just a quick follow up. Using <cms:show k_cur_token /> in the output file name makes it dynamic. The file name changes with every page load. So the tag ends up creating a new minified file with every page load! Not desirable.

If you really need k_cur_token attached to the filename, you'll have to modify the tag's source code. It should be pretty easy to figure out. Look for the places where it renders the <link> and <script> tags. The code is uncomplicated and heavily commented. But let me know if you need help.
Thank you so much Tim, this is great!

I have some scripts that include couch tags, therefore I use them inline. Could I integrate them in the minimize tags too?
@Saskia,
Yes (maybe). The tag was designed to work with Couch-managed scripts and stylesheets. It adds the output of PHP files to the minimized file. So you can make your script into a Couch template and serve it as an external file.
Code: Select all
    <cms:minify 'js' as='js/script.min.js'>
        js/jquery.js
        js/bootstrap.js
        js/bootstrap-plugin.js
        js/custom.js
        js/couch-managed.php
    </cms:minify>

However, keep in mind that the context of the script changes once it's external. For instance, it won't be aware of the page it's on or have access to local variables. Also the <cms:minify> tag caches a static version of the script. Dynamic content would be frozen by this tag. So it depends what the script is doing with its Couch tags.
28 posts Page 1 of 3

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 1 guest