4

Is there any simple way to automatically add a version number when referencing a CSS file?

Example: <link href="style.css?v=VERSION-HERE" rel="stylesheet" type="text/css">

Version could be a timestamp when the style.css was last modified or something like that.

The reason for this is that I often have to tell my clients to force the browser to reload because they don't see the latest changes I've made in style.css.

If it matters, I use Deploybot and github.

Stephen Hamilton
  • 702
  • 3
  • 12
Magnus
  • 171
  • 1
  • 7

4 Answers4

7

There are several plugins that can do this.

With my plugin Stamp, you can add a timestamp to the filename or path in the following formats:

<script src="/assets/build/js/1399647655/scripts.js"></script>
<script src="/assets/build/js/scripts.1399647655.js"></script>
<script src="/assets/build/js/scripts.js?ts=1399647655"></script>

The last one, which is the one you're looking for is made with:

<script src="{{ craft.stamp.er('/assets/build/js/scripts.js', 'query') }}"></script>

You can also get only the timestamp, and use it however you want, like this:

{% set timestamp = craft.stamp.er('/assets/build/js/scripts.js', 'tsonly') %}

It's worth noting that you'd ideally want to not use a query string for this, as various frontside proxies could ignore it. But, you need to be able to set up the proper url rewriting in your webserver for the filename and folder versions, so that might not always be possible.

There is also Cache Buster from Focuslab which can add a query string, but also supports file revisioning based on a manifest file.

And there's Asset Rev from Club Studio which is primarily for file revisioning based on a manifest file, but falls back to a query string.

André Elvan
  • 7,288
  • 22
  • 34
6

I tend to use a config.php variable (called assetVersion) for the production site, and just generate a random value for the dev site using Twig's random function. Looks like this:

<link rel="stylesheet" href="/assets/css/style-min.css{{ craft.config.devMode ? '?v=' ~ random() : '?v=' ~ craft.config.assetVersion }}">
Ian Ebden
  • 894
  • 6
  • 12
0

Funny that you mention DeployBot — I actually wrote a post at DeployBot's blog about solving this exact problem with Craft, DeployBot, and Gulp.js: https://deploybot.com/blog/adding-fingerprints-to-assets-with-gulp-and-deploybot

This approach doesn't require any Craft plugins, but assumes that you use a task runner like Gulp or Grunt for building your assets.

efedorenko
  • 1
  • 1
0

This is also possible when using github actions as a deployment tool:

if you have the link like this:

<link href="/theme/css/styles.css?v=TAG" rel="stylesheet">

you can add this to your GitHub action:

- name: Invalidate Stylesheet
        run: sed -i "s/?v=TAG/?v=$(date +%s)/g" $GITHUB_WORKSPACE/path/to/file.twig
KSPR
  • 3,786
  • 2
  • 29
  • 52