Versioning your css and js files is easy on Jigsaw, and that is cause it uses Laravel's Elixir package.
Out of the box, this package allows you to version your asset files, turning your app.css file into app-16d570a7.css.
Having this unique token in your asset file names, means that you can get around browser caching, cause if you change your
asset files, the token will update, and force the browsers to load in the new file. This means that you also have the browsers
cache your asset files, for a long time.
I will let you checkout the Elixir docs on what you can do with Elixir, and how it does the versioning, and here I will show you the slight changes needed to get this to work on your jigsaw site.
In a Laravel app, you would just need to call the version command, and it would version them exactly where they need to be.
elixir(function(mix) {
mix.version('css/app.css');
});However, in Jigsaw, this outputs the files into /source/build/, so your assets end up here /source/build/css/app-16d570a7.css,
which is fine, but it would means that when copied into the build_ + env folder, your include paths for the assets
would become /build/css/app-16d570a7.css which I personally don't like. I want my assets to be something like /css/app-16d570a7.css.
Thankfully, this can be accomplished with a small change to the setup. By providing the destination, we can tell Elixir to just
put them in the source folder, and we will have exactly the output that we want.
elixir(function(mix) {
mix.version('css/app.css', 'source/');
});And then all you have to do is use the elixir helper function in your blade files, for it to output the correct versioned file.
{{ elixir('css/app.css', '') }}You need to specify the buildDirectory path as empty, otherwise it will not look in the correct location for the rev-manifest.json,
which it needs to determine what to output.