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>

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 for the combined file. If you don't specify an output file, the minimized code will be rendered inline.

Code: Select all

    <cms:minify 'css'>
        css/bootstrap.css
        css/bootstrap-theme.css
        css/custom.css
    </cms:minify>

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.

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 minimized code will be rendered inline.

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'>

Code Blocks
In addition to external files, you can also include blocks of inline code inside the <cms:minify> tag. Simply mark the beginning and end of each code block with the marker /*CODE*/. One use case would be for mixing server-side Couch variables into your styles and scripts, which can be a powerful technique for integrating server-side data into your client-side scripts or style sheets.

Code: Select all

    <cms:minify 'js'>
        js/jquery.js
        js/bootstrap.js
        
        /*CODE*/
        var my_template = "<cms:show k_template_title/>";
        alert(my_template);
        /*CODE*/
        
        js/custom.js
        
        /*CODE*/
        alert('Any number and combination of external files and code blocks allowed.');
        /*CODE*/        
    </cms:minify>

This method will be most useful when the minified code is rendered inline. Otherwise, the cached external file can't respond dynamically to the conditions of the template.

Pro-tip: The above configuration may break the syntax highlighting on your text editor, because the editor doesn't know what type of code it's displaying. You can wrap your code blocks with `<script>` or `<style>` tags to get the correct highlighting and other features from your text editor. If the tags are outside of the `/*CODE*/` markers, they will be discarded in processing.

Code: Select all

    <cms:minify 'js'>
        js/jquery.js
        js/bootstrap.js
        
        <script>/*CODE*/
            var my_template = "<cms:show k_template_title/>";
            alert(my_template);
        /*CODE*/</script>
        
        js/custom.js
    </cms:minify>

Timestamps
Time-stamping your assets to bust browser caching is especially useful for sites with lots of regular users. This tag offers 2 optional methods to timestamp output files for version control. The feature needs to be turned on in the minify.php file. At the top of the file, you'll find these two lines. Uncomment one or the other to turn on versioning.

Code: Select all

//define('MINIFY_TIMESTAMP_QUERYSTRING', 1);
//define('MINIFY_TIMESTAMP_FILENAME', 1);// ** Requires a rewrite rule in .htaccess **

The first option adds a querystring to the filename: styles.min.css?1515655661.

The second choice adds a timestamp to the filename itself: styles.min.css^1515655661^.css. The actual filename isn't changed, just the output on the front end. For this method, you have to add a rewrite rule to the .htaccess file in the site's root in order to direct the link to the correct file. This method is borrowed from @trendoman's <cms:rel> tag.

Code: Select all

RewriteRule ^(.+)\^([\d-]+)\^\.(js|css)$ $1 [L]

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. However, the javascript minification is less aggressive than most desktop utilities, so js file sizes will be somewhat larger by comparison.

https://github.com/fallingsprings/couch ... ify-js-css

THANK YOU TIM !!!!!

have a problem with this solution:



in result have this message:



maybe with CSS will be same, not tested

[trendoman]

Andrej, tag parameters are strings if put in single quotes. Double quotes allow tags in parameters.

no, same

@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.