Stylesheets caching

When I make changes to my style sheet and deploy from dev to staging I need to hit refresh on the page to see those changes. I thought this was taken care of in the Gulp tasks but I’m still getting to know what all is taking place in the Gulp tasks.

Is there something I’m missing here to version my CSS files? Generally I just use a url variable if I want to force update the user’s cached style sheet “main.css?2”

Are you running gulp --production while deploying to staging? That should be adding a random SHA to the end of the filenames and then automatically invalidating the cache.

1 Like

That must be it, I’ve been deploying with my dist folder included as I was having trouble with my Trellis deploy running Gulp. I’ll see if I can get that worked out. Thanks for the info.

A long while ago, Roots had a Grunt task which would actually write to the PHP file where the files were enqueued, and update the version number. However it made making any CSS/JS updates a pain with version control, especially if you were committing the built files, a tiny CSS update required a minimum of three files to be committed. And working with more than one person could easily lead to merge conflicts.

So yeah, the new process where we run the production flag with gulp, and a json file is created with the file names with the SHA1 actually in the file name not only leads to better commits in version control, but also better cache busting since the actual file name is changed.

The only downside to this is if you have a deploy process which doesn’t allow for building assets. But there are definitely ways around that.

For instance, doing a git push to WP Engine is still possible. What I did was signed up for free with Codeship, and set it up so that a git push runs through the same tests that Sage uses with TravisCI, then builds the assets on the Codeship server, does a git push from the CI server after everything checks out, then does FTP, uploads all files in dist to dist-new, then does a quick rename of dist to dist-old, dist-new to dist, and deletes dist-old.

1 Like