Merge pull request #9 from thegeeklab/cache-busting

Cache busting

.gitignore

@@ -2,19 +2,23 @@
 .swp
 .env*
 dist/
-tmp/
+build/
 node_modules/
 lhci_reports/
 exampleSite/themes/
 exampleSite/public/
 
 # auto-generated files
 layouts/partials/icons-svg-symbols.html
-static/main.*
+assets/*.css
+static/*.css
+!static/custom.css
+static/js/*.js
 static/favicon/
 static/fonts/GeekblogIcons.*
 resources/
 exampleSite/resources/
+data/assets.json
 
 # testing
 .lighthouseci/

.tarignore

@@ -11,4 +11,6 @@ node*
 local*
 dist
 src
-tmp
+build
+renovate*
+resources

CHANGELOG.md

@@ -1,14 +1,5 @@
 - ENHANCEMENT
-  - add node `gulp` script to package.json
-  - remove `title` and set empty `alt` tag on branding image
-  - add minimal working css for printing
-  - split out mobile css
   - load static css/js assets from data template:
-    This way users can hash static assets and overwrite the data template
-    to deliver the hashed assets. Thats helpful if you have to deal with
-    long cache settings but wont to ensure your updated assets are delivered
-    to clients.
-- BUGFIX
-  - use relative URL's for fonts
-- INTERNAL
-  - publish Lighthouse CI overwiew to PR's
+    Build-in assets are now hashed by default. The static assets are located
+    in the `assets` directory. The theme will read and use the hashed files
+    from `data/assets.json`. Exception: `custom.css` will be used unhashed.

data/assets-static.json

@@ -0,0 +1,3 @@
+{
+  "custom.css": "custom.css"
+}

gulpfile.js

@@ -4,15 +4,17 @@ const sass = require("gulp-sass");
 const cleanCSS = require("gulp-clean-css");
 const autoprefixer = require("gulp-autoprefixer");
 const iconfont = require("gulp-iconfont");
+const clean = require("gulp-clean");
 
 const realFavicon = require("gulp-real-favicon");
 const path = require("path");
 const fs = require("fs");
 
 const svgSprite = require("gulp-svg-sprite");
+const rev = require("gulp-rev");
 
-var CSSDEST = "static/";
-var FAVICON_DATA_FILE = "tmp/faviconData.json";
+var CSSDEST = "assets/";
+var FAVICON_DATA_FILE = "build/faviconData.json";
 var TIMESTAMP = Math.round(Date.now() / 1000);
 
 gulp.task("sass", function () {
@@ -120,7 +122,7 @@ gulp.task("svg-sprite", function () {
         padding: 5,
         box: "content",
       },
-      dest: "tmp/intermediate-svg",
+      dest: "build/intermediate-svg",
     },
     svg: {
       xmlDeclaration: false,
@@ -169,23 +171,52 @@ gulp.task("iconfont", function () {
     .pipe(
       iconfont({
         startUnicode: lastUnicode,
-        fontName: "GeekblogIcons", // required
-        prependUnicode: true, // recommended option
+        fontName: "GeekblogIcons",
+        prependUnicode: true,
         normalize: true,
         fontHeight: 1001,
         centerHorizontally: true,
-        formats: ["woff", "woff2"], // default, 'woff2' and 'svg' are available
-        timestamp: TIMESTAMP, // recommended to get consistent builds when watching files
+        formats: ["woff", "woff2"],
+        timestamp: TIMESTAMP,
       })
     )
     .pipe(gulp.dest("static/fonts/"));
 });
 
+gulp.task("asset-rev", function () {
+  return gulp
+    .src(["assets/*.min.css", "assets/js/*.min.js"], {
+      base: "static",
+    })
+    .pipe(gulp.dest("build/assets"))
+    .pipe(rev())
+    .pipe(gulp.dest("static"))
+    .pipe(
+      rev.manifest("data/assets-static.json", {
+        base: "data",
+        merge: true,
+      })
+    )
+    .pipe(rename("assets.json"))
+    .pipe(gulp.dest("data"));
+});
+
+gulp.task("asset-rm", function () {
+  return gulp
+    .src(["build/assets", "static/js/*-*.js", "static/*-*.css"], {
+      read: false,
+      allowEmpty: true,
+    })
+    .pipe(clean());
+});
+
+gulp.task("asset", gulp.series("asset-rm", "asset-rev"));
+
 gulp.task(
   "default",
-  gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate")
+  gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate", "asset")
 );
 
 gulp.task("devel", function () {
-  gulp.watch("src/sass/**/*.*css", gulp.series("sass"));
+  gulp.watch("src/sass/**/*.*css", gulp.series("sass", "asset"));
 });

package.json

@@ -16,11 +16,13 @@
   "devDependencies": {
     "gulp": "4.0.2",
     "gulp-autoprefixer": "7.0.1",
+    "gulp-clean": "^0.4.0",
     "gulp-clean-css": "4.3.0",
     "gulp-concat": "2.6.1",
     "gulp-iconfont": "10.0.3",
     "gulp-real-favicon": "0.3.2",
     "gulp-rename": "2.0.0",
+    "gulp-rev": "^9.0.0",
     "gulp-sass": "4.1.0",
     "gulp-svg-sprite": "1.5.0",
     "prettier": "2.2.0",