# Kirby Assets Refresh - SHUT DOWN

**URL:** <https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932>\
**Category:** Plugins\
**Tags:** discontinued\
**Created:** [April 22, 2016, 9:51am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932 "2016-04-22T09:51:39Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [April 22, 2016, 9:51am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/1 "2016-04-22T09:51:39Z")

</div>

I know there are already plugin for what they use to call cache busting. The difference with this one is that you don’t need to modify your htaccess file.

[https://github.com/jenstornell/kirby-assets-refresh](https://github.com/jenstornell/kirby-assets-refresh)

To use it you simple add an `r` to the function, like this:

```php
echo cssr('assets/css/site.css');

```

or

```php
echo jsr('assets/css/site.css');

```

It supports the same arguments as the original functions does.

_ **Be aware! Kirby has a bug in 2.3 beta which prevent the `css` and `js` to work with arrays. It will probably be fixed soon, but it can break this plugin in Kirby 2.3 beta.** _

---

<div class="post-metadata">

**Author:** ![gerardkd](https://avatars.discourse-cdn.com/v4/letter/g/e56c9b/32.png) [@gerardkd](https://forum.getkirby.com/u/gerardkd)\
**Post date:** [April 22, 2016, 10:27am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/2 "2016-04-22T10:27:51Z")

</div>

I generally add a timestamp to the the css / js call, to prevent cache, like this:

```auto
<?php echo css('assets/css/site.css?v='.time().' ?>

```

Isn’t this the same as cache busting ? 🙂

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [April 22, 2016, 10:43am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/3 "2016-04-22T10:43:25Z")

</div>

Yes, my plugin does the same thing.

The difference between your solution and the plugin would be that the plugin makes you write less code in the template/snippet and it support arrays.

**Your code if you would use an array:**

```php
echo css(array(
  'assets/css/site.css?v='.time(),
  'assets/css/form.css?v='.time(),
  'assets/css/grid.css?v='.time()
))

```

You also would need some if statement to not refresh cache when not logged in.

**With the plugin for the same thing:**

```php
echo cssr(array(
  'assets/css/site.css',
  'assets/css/form.css',
  'assets/css/grid.css'
))

```

A little shorter and don’t need to check if the user is logged in or not. It’s done automatically by the function.

As up today I’ve done it just like you. What does `v` stand for? I use `r´, which stands for refresh.

---

<div class="post-metadata">

**Author:** ![Pascalmh](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/pascalmh/32/3612_2.png) [@Pascalmh](https://forum.getkirby.com/u/Pascalmh)\
**Post date:** [April 23, 2016, 8:45am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/4 "2016-04-23T08:45:53Z")

</div>

Why are you using `time()` and not [filemtime()](http://php.net/manual/en/function.filemtime.php)? Using filemtime the Browser will cache the File until it has actually changed.

---

<div class="post-metadata">

**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\
**Post date:** [April 23, 2016, 9:10am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/5 "2016-04-23T09:10:06Z")

</div>

That’s what I would recommend as well. The official [cachebuster plugin](https://github.com/getkirby/plugins/tree/master/cachebuster) does it like that as well and it even uses the native `css` and `js` functions so that there is no template change needed.  
Apart from requiring rewrite rules, is there anything that you don’t like about the cachebuster plugin?

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [April 23, 2016, 4:07pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/6 "2016-04-23T16:07:04Z")

</div>

That’s the main reason. I don’t like to change the htaccess file If I don’t need to.

I don’t think any solution is better than the other. I prefer php, some prefer htaccess.

---

<div class="post-metadata">

**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\
**Post date:** [April 23, 2016, 4:50pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/7 "2016-04-23T16:50:06Z")

</div>

The rewriting solution does have advantages: Some environments don’t cache resources _at all_ if they have a query string (i.e. if they contain a question mark). So including the file modification time in the filename is safer.

I have experienced this with a proxy server and also when using appcache manifests, so I always prefer the rewriting solution from now on.

Regarding the “which solution is better” part: That always depends on the use-case of course. But in my opinion it is essential to use the file modification time instead of the current time, otherwise you could just disable caching completely. Nothing will be cached if you use the current time. 😉

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 23, 2016, 6:33pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/8 "2016-04-23T18:33:42Z")

</div>

There are other options as well. If you use gulp/gulp-rev, you get files with a hashed suffix and a rev-manifest file from which you can fetch the correct filename without changing the .htaccess. A bit more to write, but no changes to the .htaccess and no changes to the css/js helpers. And the suffix is part of the filename.

The thing I don’t understand about your plugin, @jenstornell, is the signed in users bit. I would want all my users to get the latest files?

---

<div class="post-metadata">

**Author:** ![Andi-Lo](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andi-lo/32/2582_2.png) [@Andi-Lo](https://forum.getkirby.com/u/Andi-Lo)\
**Post date:** [April 23, 2016, 8:20pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/9 "2016-04-23T20:20:08Z")

</div>

like @texnixe mentioned there is a gulp task for hashing your assets like js / css or even image files.

I think the real downside of your @jenstornell plugin is that by using the “time()” function you will disable any browser caching of your asset files? I’m not sure if that is the right thing to do because you want returning visitors to already have your assets in their cach.

For me I prefer to hash the assets via gulp, so when the content changes then my file changes and if the asset stays the same the hash will not change and so the user can get a cached version.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 23, 2016, 8:36pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/10 "2016-04-23T20:36:13Z")

</div>

> [@Andi-Lo](#):
>
> For me I prefer to hash the assets via gulp, so when the content changes then my file changes and if the asset stays the same the hash will not change and so the user can get a cached version.

That’s exactly how it should work. In fact, you want to set the assets to never expire and then control cache busting via the hashed file. Using `time()` to bust the cache on every page load is really counterproductive.

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [April 25, 2016, 8:43am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/11 "2016-04-25T08:43:38Z")

</div>

Thanks for all the positive feedback I’ve got. 😉

**I’ve looked into all your suggestions and released a new version:**

[https://github.com/jenstornell/kirby-assets-refresh](https://github.com/jenstornell/kirby-assets-refresh)

In the html it looks like this:

```auto
<link rel="stylesheet" href="http://localhost/assets-refresh/assets/css/test-1461571548.css">
<script src="http://localhost/assets-refresh/assets/js/test-1461571763.js"></script>  

```

**Some changes based on your suggestions:**

- It does no longer rely on a `$_GET` variable. Instead it rewrites the filename.
- It does no longer rely on a timestamp. Instead it looks at when the file was updated.
- It does no longer check if the user is logged in.

Thanks @Pascalmh @lukasbestle @texnixe

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [May 2, 2016, 9:33am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/12 "2016-05-02T09:33:08Z")

</div>

I’m considering to move to Gulp Rev as you suggested. It works well except for that it adds a new file on every save.

Do you know how only keep the latest prefixed file (and the original)?

**Now it looks like this:**

```auto
index-5b1bc87684.min.css
index-035387c2f5.min.css
index-e344af7a5a.min.css
index.min.css

```

**What I want:**

```auto
index-e344af7a5a.min.css
index.min.css

```

It’s possible with rename or delete tasks, but maybe there is a better way?

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [May 2, 2016, 11:25am UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/13 "2016-05-02T11:25:17Z")

</div>

I think I got it working now:

**This is my final css gulp task:**

```auto
gulp.task('css', function() {
	gulp.src('site/patterns/site/site.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer())
		.pipe(rename('index.css'))
		.pipe(gulp.dest('assets/css'))
		.pipe(minifyCss())
		.pipe(rev())
		.pipe(gulp.dest('assets/css'))
		.pipe(rev.manifest())
		.pipe(revDel({ dest: 'assets/css' }))
		.pipe(gulp.dest('assets/css'))
		.pipe(notify("CSS generated!"))
	;
});

```

**The magic is using:**

> **[callumacrae/rev-del](https://github.com/callumacrae/rev-del)**
>
> rev-del - :haircut: Delete old fingerprinted files

## Update

Most of the time it did not work. I ended up with this instead:

```auto
// CSS
gulp.task('css', function() {
	gulp.src('site/patterns/site/site.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer())
		.pipe(rename('index.css'))
		.pipe(minifyCss())
		.pipe(rev())
		.pipe(gulp.dest('assets/css'))
		.pipe(rev.manifest())
		.pipe(gulp.dest('assets'))
		.pipe(notify("CSS generated!"))
	;
});

gulp.task('clean-css', ['css'], function() {
	gulp.src( ['assets/css/index-*.css'], {read: false})
		.pipe( revOutdated(1) )
		.pipe( cleaner() );
	return;
});

```

Now the magic is done by [https://github.com/shonny-ua/gulp-rev-outdated](https://github.com/shonny-ua/gulp-rev-outdated). It’s more stupid and more agressive, but it works.

---

<div class="post-metadata">

**Author:** ![fvsch](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/fvsch/32/15908_2.png) [@fvsch](https://forum.getkirby.com/u/fvsch)\
**Post date:** [May 6, 2016, 9:58pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/15 "2016-05-06T21:58:54Z")

</div>

I’ve worked with gulp-rev and gulp-rev-outdated on a big project, not really fond of it but it works (somewhat…) and if you have that kind of technical requirements I guess it helps.

One pitfall with gulp-rev (and any similar approach) is that you’ll probably forgot to use it for parts of your assets, e.g. you used it for CSS and JS but not for your SVG sprites or some of the layout images -\> bam, disconnect between your styles or scripts and the files they reference.

For small projects I’m happy with adding a query string to asset URLs, even a manually managed, global one, or a per-file one based on filemtime (as in [Get path to assets/images](https://forum.getkirby.com/t/get-path-to-assets-images/1304/8)).

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [March 10, 2017, 12:32pm UTC](https://forum.getkirby.com/t/kirby-assets-refresh-shut-down/3932/16 "2017-03-10T12:32:35Z")

</div>

This plugin was not good enough. I have now shut it down.
