Add timestamp to CSS and JS URLs to cachebust

.browser-sync.js

@@ -4,4 +4,5 @@ module.exports = {
     'theme/**/*',
   ],
   watchTask: true,
+  open: false,
 };

.gitignore

@@ -39,4 +39,4 @@ coverage/
 # Distribution assets
 theme/bundle.js
 theme/style.css
-
+theme/.timestamp

build/deploy.sh

@@ -5,6 +5,10 @@ hash rsync 2>/dev/null || { echo >&2 "Error: rsync is not installed. Aborting.";
 [ -z "$SSH_IP" ] && { echo >&2 "Error: SSH_IP is missing. Aborting."; exit 1; }
 [ -z "$SSH_USER" ] && { echo >&2 "Error: SSH_USER is missing. Aborting."; exit 1; }
 
+# Write deploy timestamp to disk
+timestamp=$(date +%s)
+echo $timestamp > ./theme/.timestamp
+
 # Deploy theme with rsync
 rsync -e "ssh -o StrictHostKeyChecking=no" -avzuh --progress \
   theme/* $SSH_USER@$SSH_IP:~/windycoys_theme

package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/danhead/windycoys"
   },
   "scripts": {
-    "build": "npm run css:compile && npm run js:compile",
+    "build": "run-s css:compile js:compile",
     "css": "run-p -c css:*",
     "css:compile": "postcss -o theme/style.css css/index.css",
     "css:lint": "stylelint --config .stylelintrc \"css/**/*.css\"",
@@ -20,30 +20,28 @@
     "js:lint": "eslint js/",
     "serve": "browser-sync start --config .browser-sync.js",
     "start": "run-p watch serve",
-    "test": "npm run css:lint && npm run js:lint && npm run jest",
+    "test": "run-s css:lint js:lint jest",
     "watch": "run-p watch:*",
     "watch:css": "nodemon -q --watch css -e css --exec npm run css",
     "watch:js": "nodemon -q --watch js -e js --exec npm run js"
   },
   "devDependencies": {
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^22.4.4",
     "browser-sync": "^2.26.3",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "jest": "^22.4.4",
     "nodemon": "^1.18.7",
-    "npm-run-all": "^4.1.5",
-    "pre-commit": "^1.2.2",
-    "stylelint": "^8.4.0",
-    "stylelint-config-standard": "^18.0.0"
+    "pre-commit": "^1.2.2"
   },
   "dependencies": {
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
-    "cssnano": "^3.10.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^22.4.4",
+    "cssnano": "^4.1.7",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "jest": "^22.4.4",
+    "npm-run-all": "^4.1.5",
     "postcss-banner": "^3.0.0",
     "postcss-cli": "^4.1.1",
     "postcss-import": "^11.0.0",
@@ -51,7 +49,9 @@
     "postcss-preset-env": "^6.4.0",
     "rollup": "^0.58.2",
     "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-uglify": "^3.0.0"
+    "rollup-plugin-uglify": "^3.0.0",
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.0.0"
   },
   "pre-commit": [
     "test"

theme/footer.php

@@ -1 +1,8 @@
-<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/bundle.js"></script>
+<?php
+$js_url = get_template_directory_uri() . '/bundle.js';
+$deploy_timestamp = windycoys_get_deploy_timestamp();
+if ($deploy_timestamp) {
+  $js_url .= '?t=' . $deploy_timestamp;
+}
+?>
+<script type="text/javascript" src="<?php echo $js_url ?>"></script>

theme/functions.php

@@ -1,5 +1,4 @@
 <?php
-
 class Windycoys_Walker_Comment extends Walker_Comment {
   function start_el(&$output, $comment, $depth = 0) {
     $id = $comment->comment_ID;
@@ -84,3 +83,11 @@ function windycoys_search_posts_per_page($query) {
   return $query;
 }
 add_filter('pre_get_posts', 'windycoys_search_posts_per_page');
+
+function windycoys_get_deploy_timestamp() {
+  if (file_exists(__DIR__ . '/.timestamp')) {
+    $timestamp = file_get_contents(__DIR__ . '/.timestamp');
+    return $timestamp;
+  }
+  return false;
+}

theme/header.php

@@ -1,3 +1,10 @@
+<?php
+$css_url = get_template_directory_uri() . '/style.css';
+$deploy_timestamp = windycoys_get_deploy_timestamp();
+if ($deploy_timestamp) {
+  $css_url .= '?t=' . $deploy_timestamp;
+}
+?>
 <!doctype html>
 <html <?php language_attributes(); ?>>
   <head>
@@ -7,7 +14,7 @@
     <meta name="theme-color" content="#4b88b6">
     <meta name="description" content="<?php bloginfo('description'); ?>">
     <?php wp_head(); ?>
-    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
+    <link rel="stylesheet" href="<?php echo $css_url ?>">
     <link href="//fonts.googleapis.com/css?family=Open+Sans|Raleway:700" rel="stylesheet">
   </head>
   <body>