Replace convoluted gulp-rev with gulp-rev-all

rfgamaral · Nov 2, 2017 · fd3606d · fd3606d
1 parent 870b387
commit fd3606d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 # Build: Dependencies and output files
-.tmp/
 dist/
 node_modules/
 

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -9,8 +9,8 @@ import gulpif from 'gulp-if';
 import htmlmin from 'gulp-htmlmin';
 import merge2 from 'merge2';
 import plumber from 'gulp-plumber';
-import rev from 'gulp-rev';
-import revReplace from 'gulp-rev-replace';
+import revAll from 'gulp-rev-all';
+import revDeleteOriginal from 'gulp-rev-delete-original';
 import sass from 'gulp-sass';
 import ssi from 'gulp-ssi';
 import uglify from 'gulp-uglify';
@@ -20,11 +20,6 @@ import watch from 'gulp-watch';
 const environment = envalid.cleanEnv(process.env);
 const browserSyncInstance = browserSync.create();
 
-const revOptions = {
-    cssManifest: 'rev-manifest-styles.json',
-    jsManifest: 'rev-manifest-js.json'
-};
-
 /**
  * Auxiliary function to log a plugin error with color support and a formatted message.
  *
@@ -75,10 +70,7 @@ function buildStylesTask() {
         .pipe(plumber.stop())
         .pipe(gulpif(environment.isProduction, autoprefixer()))
         .pipe(gulpif(environment.isProduction, cssnano(cssnanoOptions)))
-        .pipe(gulpif(environment.isProduction, rev()))
-        .pipe(dest('./dist/assets/css'))
-        .pipe(gulpif(environment.isProduction, rev.manifest(revOptions.cssManifest)))
-        .pipe(gulpif(environment.isProduction, dest('./.tmp')));
+        .pipe(dest('./dist/assets/css'));
 }
 
 /**
@@ -100,10 +92,7 @@ function buildScriptsTask() {
     return src('./src/assets/scripts/**/*.js')
         .pipe(babel())
         .pipe(gulpif(environment.isProduction, uglify()))
-        .pipe(gulpif(environment.isProduction, rev()))
-        .pipe(dest('./dist/assets/scripts'))
-        .pipe(gulpif(environment.isProduction, rev.manifest(revOptions.jsManifest)))
-        .pipe(gulpif(environment.isProduction, dest('./.tmp')));
+        .pipe(dest('./dist/assets/scripts'));
 }
 
 /**
@@ -125,18 +114,8 @@ function buildTemplateTask() {
         root: './'
     };
 
-    const cssRevReplaceOptions = {
-        manifest: environment.isProduction ? src(`./.tmp/${revOptions.cssManifest}`) : util.noop
-    };
-
-    const jsRevReplaceOptions = {
-        manifest: environment.isProduction ? src(`./.tmp/${revOptions.jsManifest}`) : util.noop
-    };
-
     return merge2(
         src('./src/index.html')
-            .pipe(gulpif(environment.isProduction, revReplace(cssRevReplaceOptions)))
-            .pipe(gulpif(environment.isProduction, revReplace(jsRevReplaceOptions)))
             .pipe(gulpif(environment.isProduction, ssi(ssiOptions)))
             .pipe(gulpif(environment.isProduction, htmlmin({
                 collapseBooleanAttributes: true,
@@ -152,14 +131,37 @@ function buildTemplateTask() {
     ).pipe(dest('./dist'));
 }
 
+/**
+ * Perform static asset revisioning - with dependency considerations - by appending content hash to
+ * filenames (eg. unicorn.css => unicorn.098f6bcd.css).
+ */
+function revStaticAssetsTask() {
+    const revAllOptions = {
+        dontGlobal: [
+            /^\/favicon.ico$/g
+        ],
+        dontRenameFile: [
+            'CNAME',
+            'index.html'
+        ],
+        transformPath: (rev, source, path) =>
+            rev.includes('open-graph-preview') ? `https://ricardoamaral.net/${rev}` : rev
+    };
+
+    return src('./dist/**/*')
+        .pipe(revAll.revision(revAllOptions))
+        .pipe(revDeleteOriginal())
+        .pipe(dest('./dist'));
+}
+
 /**
  * Compile source files and launch a Browsersync development server. Changes made will either be
  * injected into the page or will cause all browsers to do a full-page refresh.
  *
  * @export `development` task.
  */
 export const development = series(
-    series(parallel(buildStylesTask, buildScriptsTask), buildTemplateTask),
+    parallel(buildStylesTask, buildScriptsTask, buildTemplateTask),
     parallel(watchStylesTask, watchScriptsTask, watchTemplateTask, initializeBrowserSync)
 );
 
@@ -168,4 +170,7 @@ export const development = series(
  *
  * @export `production` task.
  */
-export const production = series(parallel(buildStylesTask, buildScriptsTask), buildTemplateTask);
+export const production = series(
+    parallel(buildStylesTask, buildScriptsTask, buildTemplateTask),
+    revStaticAssetsTask
+);
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "cf-purge": "cfcli --config config/cloudflare.yml purge",
     "clean": "npm-run-all --parallel clean:*",
     "clean:dist": "rimraf dist/",
-    "clean:temp": "rimraf .tmp/",
     "deploy": "npm-run-all build gh-pages cf-purge",
     "gh-pages": "gh-pages --dist dist/ --message \"Deploy new website build to GitHub\"",
     "gulp:development": "cross-env NODE_ENV=development gulp development",
@@ -44,8 +43,8 @@
     "gulp-htmlmin": "3.0.0",
     "gulp-if": "2.0.2",
     "gulp-plumber": "1.1.0",
-    "gulp-rev": "8.0.0",
-    "gulp-rev-replace": "0.4.3",
+    "gulp-rev-all": "0.9.7",
+    "gulp-rev-delete-original": "0.2.3",
     "gulp-sass": "3.1.0",
     "gulp-ssi": "0.1.3",
     "gulp-uglify": "3.0.0",

diff --git a/src/index.html b/src/index.html
@@ -20,7 +20,7 @@
         <meta property="og:title" content="Ricardo Amaral &bull; Software Engineer" />
         <meta property="og:description"
               content="Hi, I'm Ricardo. I'm a quality-driven software engineer based in Porto, Portugal. I'm passionate about Android and I also build things for the Web." />
-        <meta property="og:image" content="https://ricardoamaral.net/assets/images/open-graph-preview.png" />
+        <meta property="og:image" content="assets/images/open-graph-preview.png" />
 
         <meta name="twitter:card" content="summary_large_image">
         <meta name="twitter:site" content="@rfgamaral" />