Better static asset revisioning using randomly generated hash when running gulp tasks.

CHANGELOG.md

@@ -1,4 +1,7 @@
 # barebones changelog
+## 2.0.4
+* Better static asset revisioning using randomly generated hash when running gulp tasks.
+
 ## 2.0.3
 * update get_post_thumbnail_url function and add ability to get specific size.
 

functions.php

@@ -72,7 +72,7 @@ function barebones_scripts()
     wp_deregister_script('jquery');
     wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3', true);
     wp_enqueue_script('jquery');
-    wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . time(), ['jquery'], null, true);
+    wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . getPackageHash(), ['jquery'], null, true);
 }
 
 add_action('wp_enqueue_scripts', 'barebones_scripts');
@@ -173,7 +173,18 @@ function barebones_tiny_mce_before_init($settings)
 
 add_filter('tiny_mce_before_init', 'barebones_tiny_mce_before_init');
 
+/**
+ * Get hash from package.json used for assets url hash
+ * @return string
+ */
+function getPackageHash()
+{
+  $package = file_get_contents(get_bloginfo( 'stylesheet_directory' ) . "/package.json");
+  $packageJson = json_decode($package, true);
 
+  // if there is problem, fallback to time.
+  return isset($packageJson['hash']) ? $packageJson['hash'] : time();
+}
 
 /**
  * Get post thumbnail url

gulpfile.js

@@ -2,7 +2,6 @@
 // process.env.DISABLE_NOTIFIER = true;
 
 var gulp = require('gulp');
-var gulpImagemin = require('gulp-imagemin');
 var elixir = require('laravel-elixir');
 
 // Assets path
@@ -15,15 +14,34 @@ elixir.config.css.autoprefix.options.browsers =  ['last 15 versions'];
 var Task = elixir.Task;
 elixir.extend('imagemin', function(src, dest) {
   new Task('imagemin', function() {
+    var gulpImagemin = require('gulp-imagemin');
     return gulp.src(elixir.config.assetsPath + src)
         .pipe(gulpImagemin())
         .pipe(gulp.dest(dest));
   }).watch(elixir.config.assetsPath + src);
 });
 
+// Create a Hash in package.json
+elixir.extend('hash', function() {
+  new Task('hash', function() {
+    var fs = require('fs');
+    var fileName = './package.json';
+    var file = require(fileName);
+
+    // generate a new hash
+    file.hash = ( 0 | Math.random() * 9e6 ).toString(36);
+    // save to package.json
+    fs.writeFile(fileName, JSON.stringify(file, null, 2), function (err) {
+      if (err) return console.log(err);
+      console.log('writing to ' + fileName);
+    });
+  })
+});
+
 // Run elixir tasks
 elixir(function(mix) {
     mix.sass('barebones.scss', 'style.css')
        .scripts(['script.js'], 'js/script.min.js')
-       .imagemin('/images/**/*', './img');
+       .imagemin('/images/**/*', './img')
+       .hash();
 });

header.php

@@ -7,7 +7,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
         <link rel="dns-prefetch" href="//google-analytics.com">
-        <link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url') . '?' . time(); ?>">
+        <link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url') . '?' . getPackageHash(); ?>">
         <?php wp_head(); ?>
         <!--[if lt IE 10]>
         <script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>

package.json

@@ -1,6 +1,7 @@
 {
   "name": "barebones",
-  "version": "2.0.3",
+  "version": "2.0.4",
+  "hash": "brbns",
   "author": "Benchmark Studios",
   "description": "A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond",
   "license": "MIT",
@@ -17,6 +18,7 @@
   },
   "private": true,
   "devDependencies": {
+    "fs": "^0.0.2",
     "gulp": "^3.8.8",
     "gulp-imagemin": "^3.0.1",
     "imagemin-gifsicle": "^5.1.0",