Static Asset Hashing

gulpfile.babel.js

@@ -18,9 +18,15 @@ const $ = plugins();
 // Check for --production flag
 const PRODUCTION = !!(yargs.argv.production);
 
+// Check for --development flag unminified with sourcemaps
+const DEV = !!(yargs.argv.dev);
+
 // Load settings from settings.yml
 const { BROWSERSYNC, COMPATIBILITY, PATHS } = loadConfig();
 
+// Set to true if you want asset revisioning, helpful for cachebusting
+const REVISIONING = false;
+
 // Check if file exists synchronously
 function checkFileExists(filepath) {
   let flag = true;
@@ -92,6 +98,9 @@ function sass() {
 
     .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
     .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
+    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
+    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
     .pipe(gulp.dest(PATHS.dist + '/assets/css'))
     .pipe(browser.reload({ stream: true }));
 }
@@ -124,6 +133,9 @@ function javascript() {
       .on('error', e => { console.log(e); })
     ))
     .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
+    .pipe(gulp.dest(PATHS.dist + '/assets/js'))
+    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
     .pipe(gulp.dest(PATHS.dist + '/assets/js'));
 }
 

library/enqueue-scripts.php

@@ -9,29 +9,64 @@
  * @since FoundationPress 1.0.0
  */
 
+
 if ( ! function_exists( 'foundationpress_scripts' ) ) :
 	function foundationpress_scripts() {
 
-	// Enqueue the main Stylesheet.
-	wp_enqueue_style( 'main-stylesheet', get_template_directory_uri() . '/dist/assets/css/app.css', array(), '2.10.3', 'all' );
+		// Check to see if rev-manifest exists for CSS and JS static asset revisioning
+		//https://github.com/sindresorhus/gulp-rev/blob/master/integration.md
+		function css_asset_path($filename) {
+			$manifest_path = dirname(dirname(__FILE__)) . '/dist/assets/css/rev-manifest.json';
 
-	// Deregister the jquery version bundled with WordPress.
-	wp_deregister_script( 'jquery' );
+			if (file_exists($manifest_path)) {
+				$manifest = json_decode(file_get_contents($manifest_path), TRUE);
+			} else {
+				$manifest = [];
+			}
 
-	// CDN hosted jQuery placed in the header, as some plugins require that jQuery is loaded in the header.
-	wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', array(), '3.2.1', false );
+			if (array_key_exists($filename, $manifest)) {
+				return $manifest[$filename];
+			}
 
-	// Enqueue Founation scripts
-	wp_enqueue_script( 'foundation', get_template_directory_uri() . '/dist/assets/js/app.js', array( 'jquery' ), '2.10.3', true );
+			return $filename;
+		}
 
-	// Enqueue FontAwesome from CDN. Uncomment the line below if you don't need FontAwesome.
-	//wp_enqueue_script( 'fontawesome', 'https://use.fontawesome.com/5016a31c8c.js', array(), '4.7.0', true );
+		function js_asset_path($filename) {
+			$manifest_path = dirname(dirname(__FILE__)) . '/dist/assets/js/rev-manifest.json';
 
+			if (file_exists($manifest_path)) {
+				$manifest = json_decode(file_get_contents($manifest_path), TRUE);
+			} else {
+				$manifest = [];
+			}
 
-	// Add the comment-reply library on pages where it is necessary
-	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
-		wp_enqueue_script( 'comment-reply' );
-	}
+			if (array_key_exists($filename, $manifest)) {
+				return $manifest[$filename];
+			}
+
+			return $filename;
+		}
+
+		// Enqueue the main Stylesheet.
+		wp_enqueue_style( 'main-stylesheet',  get_template_directory_uri() . '/dist/assets/css/' . css_asset_path('app.css'), array(), '2.10.3', 'all' );
+
+		// Deregister the jquery version bundled with WordPress.
+		wp_deregister_script( 'jquery' );
+
+		// CDN hosted jQuery placed in the header, as some plugins require that jQuery is loaded in the header.
+		wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', array(), '3.2.1', false );
+
+		// Enqueue Founation scripts
+		wp_enqueue_script( 'foundation', get_template_directory_uri() . '/dist/assets/js/' . js_asset_path('app.js'), array( 'jquery' ), '2.10.3', true );
+
+		// Enqueue FontAwesome from CDN. Uncomment the line below if you don't need FontAwesome.
+		//wp_enqueue_script( 'fontawesome', 'https://use.fontawesome.com/5016a31c8c.js', array(), '4.7.0', true );
+
+
+		// Add the comment-reply library on pages where it is necessary
+		if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+			wp_enqueue_script( 'comment-reply' );
+		}
 
 	}
 

package.json

@@ -8,6 +8,7 @@
   "main": "gulpfile.js",
   "scripts": {
     "start": "gulp",
+    "dev": "gulp build --dev",
     "build": "gulp build --production"
   },
   "keywords": [
@@ -42,6 +43,7 @@
     "gulp-if": "^2.0.0",
     "gulp-imagemin": "^2.2.1",
     "gulp-load-plugins": "^1.1.0",
+    "gulp-rev": "^8.0.0",
     "gulp-sass": "^2.1.0",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.2.0",