Add CSS and JS version number for cache invalidation

pangolinjs · Jan 28, 2016 · 88b3fa1 · 88b3fa1
1 parent fe800cc
commit 88b3fa1
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 17 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -8,6 +8,7 @@
 // Base
 var glob         = require('glob');
 var del          = require('del');
+var pack         = require('./package.json');
 
 // Gulp
 var gulp         = require('gulp');
@@ -92,6 +93,8 @@ var paths = {
 
 // Config
 var config = {
+  version: pack.version.replace(/\./g, ''),
+
   // CSS
   css: {
     dev: {
@@ -342,6 +345,7 @@ var compileHandlebars = function(source, destination, nav) {
   }
 
   var hbConfig = config.html.hb({
+    version: config.version,
     displayNav: nav,
     navItems: {
       pages: pages,
@@ -514,4 +518,3 @@ gulp.task('default', ['clean:dev'], function() {
     log.activity('Watching...');
   });
 });
-
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "styleguide",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "Front-end development styleguide with Sass, JavaScript and Handlebars.",
   "author": "Fynn Becker <[email protected]>",
   "scripts": {

diff --git a/src/html/partials/layouts/components.hbs b/src/html/partials/layouts/components.hbs
@@ -4,12 +4,15 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{file.meta.title}}</title>
+
     <!-- Styleguide CSS -->
     <link rel="stylesheet" href="/css/sg.css">
-    <!-- Stylesheet -->
-    <link rel="stylesheet" href="/css/styles.css">
+
+    <!--[if !IE]><!-->
+    <link rel="stylesheet" href="/css/styles.css?ver={{version}}">
+    <!--<![endif]-->
     <!--[if lte IE 9]>
-    <link rel="stylesheet" href="/css/styles.splitted.css">
+    <link rel="stylesheet" href="/css/styles.splitted.css?ver={{version}}">
     <![endif]-->
   </head>
   <body>
@@ -22,12 +25,10 @@
       <p class="sg-header__description">{{file.meta.description}}</p>
     </header>
 
-    <!-- Body -->
     <main class="sg-body">
       {{{block "content"}}}
     </main>
 
-    <!-- Scripts -->
-    <script src="/js/scripts.js"></script>
+    <script src="/js/scripts.js?ver={{version}}"></script>
   </body>
 </html>
diff --git a/src/html/partials/layouts/pages.hbs b/src/html/partials/layouts/pages.hbs
@@ -4,25 +4,28 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{file.meta.title}}</title>
+
     {{#if displayNav}}
     <!-- Styleguide CSS -->
     <link rel="stylesheet" href="/css/sg.css">
     {{/if}}
-    <!-- Stylesheet -->
-    <link rel="stylesheet" href="/css/styles.css">
-    <!--[if lte IE 9]>
-    <link rel="stylesheet" href="/css/styles.splitted.css">
+
+    <!--[if !IE]><!-->
+    <link rel="stylesheet" href="/css/styles.css?ver={{version}}">
+    <!--<![endif]-->
+    <!--[if IE]>
+    <link rel="stylesheet" href="/css/styles.splitted.css?ver={{version}}">
     <![endif]-->
   </head>
   <body>
 
+    {{#if displayNav}}
     <!-- Styleguide Nav -->
     {{> "styleguide/nav"}}
+    {{/if}}
 
-    <!-- Body -->
     {{{block "content"}}}
 
-    <!-- Scripts -->
-    <script src="/js/scripts.js"></script>
+    <script src="/js/scripts.js?ver={{version}}"></script>
   </body>
 </html>
diff --git a/src/html/partials/styleguide/nav.hbs b/src/html/partials/styleguide/nav.hbs
@@ -1,4 +1,3 @@
-{{#if displayNav}}
 <nav class="sg-nav" id="sg-nav">
   <button class="sg-nav__btn" id="sg-nav__btn">
     <span class="sg-nav__icon"></span>
@@ -27,4 +26,3 @@
     sgNav.classList.toggle('sg-nav--open');
   };
 </script>
-{{/if}}