Revisioned assets for gulp --production

[colinduwe]

The Sage theme implements https://github.com/sindresorhus/gulp-rev so when you run gulp --production a new hash is appended to css and js output to /dist/

I find this very helpful since it busts the browser cache and you don't have to tell clients to please SHIFT+Reload, etc.

Is this something others would find helpful? If so I'll put together a PR.

[dantahoua]

Like the idea as some browser really stick their cache with hard glue!! ;) I now have the habit to "command"+"shift"+"R" but clients do not know!
I'm in!

[adaminfinitum]

I'd find it helpful to have assets reved automatically.

[mhair]

Absolutely! Cache busting inclusion would be extremely helpful!

[colin-marshall]

Are you guys experiencing cache issues when using browser-sync?

[colinduwe]

Nope, browser-sync works fine. This addresses a different issue: I finish my local work, push it to staging for client review and they report things are broken because the client's browser has cached css and js.

[colin-marshall]

@colinduwe thanks for the explanation, that makes sense.

I'm assuming this is the way we would have to implement it in FoundationPress?:
https://github.com/sindresorhus/gulp-rev/blob/master/integration.md#approach-3---php-reads-the-manifest-and-provides-asset-names

[olefredrik]

Sorry for coming in late to the discussion. The way we load stylesheets and scripts in WordPress is using wp_enqueue_style and wp_enqueue_script. In our library you'll find that we append the current version number at the end of the URL for our static assets.

This works like a cache breaker. However, this is a manual process and you'll need to update these by yourself before pushing your theme to a production server.

It could be nice to have this automated by a task runner. @colinduwe : If you'd like to submit a PR for this, I'm happy to review it.

[wishe]

I have also come across this issue, clients not seeing newest changes and what not. My solution was to use filemtime. Like below:

wp_enqueue_script( 'foundation', get_template_directory_uri() . '/assets/javascript/foundation.js', array('jquery'), filemtime(get_stylesheet_directory() . '/assets/javascript/foundation.js'), true );

This sets the version number when the file gets rebuilt by gulp therefore breaking the browser cache everytime there has been a change to the file and you push those changes. Could be a quick and easy solution to implement.

[olefredrik]

As mentioned above, we have a manual cache breaker method available today. If this process were to be automated, I suggest we should generate a hash on each npm run build and inject this. There is an article on css-tricks that addresses this issue. But for now, I think we're good. So I'm closing this issue.