CouchCMS • View topic - Automatic versioning of assets( css/js )& last modified date

Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.

20 posts Page 1 of 2

Post a reply

Previous 1, 2 Next

Automatic versioning of assets( css/js )& last modified date

: trendoman; Registered User

: Posts: 2899; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Fri Dec 02, 2016 1:30 am

People,

There is this link http://particletree.com/notebook/automa ... ipt-files/
And it is pretty cool in the way it suggests automated job for versioning.

However it is flawed and if you need something like that in CouchCMS, I have a solution. Let me know if anyone is interested in doing this the couch-way. :lol:

You can make it manually, but better with some tool. Sample:

Code: Select all

<link rel="stylesheet" type="text/css" href="assets/css/custom.css.24-11-2016-160607.css" >
<link rel="stylesheet" type="text/css" href="assets/css/print.css.1-12-2016-145119.css" >
<!-- /global stylesheets -->

<!-- Core JS files -->
<script type="text/javascript" src="assets/js/plugins/loaders/pace.min.js.31-8-2016-080522.js"></script>
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js.3-9-2016-142908.js"></script>

A working sample picture:

: Sample of css and js versioned by last modification date; ScreenCut-02-09---00-15-17-.png (186.94 KiB) Viewed 7578 times

This is how it was coded:

: Here is the way it's coded; ScreenCut-02-09---00-18-15-.png (62.44 KiB) Viewed 7578 times

Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Last edited by trendoman on Thu Feb 09, 2017 2:50 am, edited 1 time in total.

Re: Automatic versioning of assets( css/js )& last modified

: trendoman; Registered User

: Posts: 2899; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Tue Dec 27, 2016 4:55 pm

So in a fast and straightforward way, this awesomly helps to code/debug JS/CSS files without instructing browser to disable cache. Clients will always receive the latest and greatest update in time

This started, when file.js?v=8 didn't work correctly - browser was serving the same cached file. Also I was constantly forgetting to increase the version after a small edit. It never bothers me again now

I now write the links and scripts from the old way

Code: Select all

<link href="assets/css/site.css" rel="stylesheet" type="text/css" >
<script src="assets/js/main.js" type="text/javascript" ></script>

To the beautiful and clean new way:

Code: Select all

<cms:rel src="assets/css/site.css" />
<cms:rel src="assets/js/main.js" />

<cms:rel /> tag guesses the type of the file from the extension and provides full correct markup. It also works for the resources without extensions, like google fonts (with optional parameter type):

Code: Select all

<cms:rel type='css' src="http://fonts.googleapis.com/css?family=Roboto:300" >

For often-changed files I enable the versioning:

Code: Select all

<cms:rel last_mod='1' src="assets/css/site.css"  />
<cms:rel last_mod='1' src="assets/js/main.js"  />

last_mod parameter adds complete date of last modification of the file, by adding it after the file-extension and for example the generated output is like this:

Code: Select all

<link rel="stylesheet" type="text/css" href="assets/css/print.css^1-12-2016-145119^.css" >
<script type="text/javascript" src="assets/js/main.js^22-12-2016-072213^.js"></script>

See the extras after the regular file name - ^{ date in format j-n-Y-His }^.{ extension }

Your browser is definitely requesting the latest possible file. This solution is so nice, that it doesn't mess with any possible file names, including digits, multiple extensions as in minified versions of js/css file.min.js, etc. Complete freedom of file names contrary to solutions that people offer in the internet. I designed this to serve my purpose to never care about the original filename and have a piece of mind.

Create a .htaccess file in root (if it's not there yet) and make sure following lines are there, which internally redirect the browser's request to the original file without date. Our original files are kept intact, we don't need to rename them on disk.

Code: Select all

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

Htaccess line uses the rewrite engine and a simple rule - anything that ends with filename.extension.^date^.extension will be redirected to just filename.extension.

Last edited by trendoman on Wed Feb 15, 2017 2:59 am, edited 4 times in total.

Re: Automatic versioning of assets( css/js )& last modified

: andrejprus; Registered User

: Posts: 85; Joined: Wed Jan 04, 2017 2:25 pm

by andrejprus » Tue Jan 10, 2017 4:34 pm

GREAT !!!

Re: Automatic versioning of assets( css/js )& last modified

: andrejprus; Registered User

: Posts: 85; Joined: Wed Jan 04, 2017 2:25 pm

by andrejprus » Fri Jan 20, 2017 3:52 pm

not works:

Code: Select all

<cms:rel src="<cms:show k_site_link />css/style.css" last_mod='1' />

<cms:show k_site_link /> is ignored

Re: Automatic versioning of assets( css/js )& last modified

: trendoman; Registered User

: Posts: 2899; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Fri Jan 20, 2017 3:57 pm

andrejprus wrote: <cms:show k_site_link /> is ignored

Fixed, thanks!

Initially I didn't code it. It is not necessary to add site link to assets if you have

Code: Select all

<head>
    <base href="<cms:show k_site_link />" >
</head>

Last edited by trendoman on Sun Feb 12, 2017 2:40 am, edited 1 time in total.

Re: Automatic versioning of assets( css/js )& last modified

: trendoman; Registered User

: Posts: 2899; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Thu Feb 09, 2017 2:43 am

Hey all, here is a standalone .htaccess which I found is very comfortable to have as a drop-in file for folder with assets.

File should work regardless of what your assets folder is named and regardless of presence of .htaccess file in the root of website. So, a drop in folder and it should be good to go. Requirements are the same as usual - have rewrite engine enabled and that's it.

File's content:

Code: Select all

<IfModule mod_rewrite.c>
RewriteEngine On

# Rule for Versioned Static Files
RewriteRule ^(.+)\^([\d-]+)\^\.(js|css)$ $1 [L]

</IfModule>

Attachments

Re: Automatic versioning of assets( css/js )& last modified

: trendoman; Registered User

: Posts: 2899; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Sun Feb 12, 2017 2:41 am

Code updated with media for CSS. Thanks to this article https://dev.to/sanjsanj/optimising-the- ... thebrowser

Code: Select all

// This css will block rendering of the page until it is downloaded and processed.
<link rel="stylesheet" href="mobile-styles.css">

// This css will download in the background on mobile and allow the page to load.
<link rel="stylesheet" href="desktop-styles.css" media="min-width: 590px">

Re: Automatic versioning of assets( css/js )& last modified

: trendoman; Registered User

: Posts: 2899; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Wed Feb 15, 2017 3:01 am

Code updated with support of adequate output of returned strings with a newline for couch2.0 and above.
It's because my editor is set up to remove any spaces after string is terminated. Couch2 removes newline in this case.. So this I had to fix for us

Re: Automatic versioning of assets( css/js )& last modified

: Gwil; Registered User

: Posts: 89; Joined: Fri Aug 10, 2018 8:16 am

by Gwil » Thu Jan 10, 2019 11:03 pm

@trendoman - just stumbled upon this. awesome! thanks (again, again, ...)

Re: Automatic versioning of assets( css/js )& last modified

: Gwil; Registered User

: Posts: 89; Joined: Fri Aug 10, 2018 8:16 am

by Gwil » Thu Jan 10, 2019 11:15 pm

is it possible to add defer/async flags for js?
eg.

Code: Select all

<cms:rel defer='1' async='1' last_mod='1' src='some.js' />

produces

Code: Select all

<script type="text/javascript" src="some.js^1-1-2019-123456.js" defer="defer" async="async"></script>

cheers,
gwil

Post a reply

Previous 1, 2 Next

20 posts Page 1 of 2

Return to Tips and Tricks