use static hashes

Author: nolimits4web

.gitignore

@@ -3,11 +3,9 @@ node_modules/
 *.log
 *.DS_Store
 public/css/main.css
-public/css/main-v8.css
-public/js/main.js
-public/js/main-v8.js
-public/js/main.js.map
-public/js/main-v8.js.map
+public/css/main.*.css
+public/js/*.js
+public/js/*.map
 public/release-notes/*.html
 public/contribute/index.html
 public/cli/*.html

build/build-pages.js

@@ -88,6 +88,14 @@ function buildPages(
     dest = './public',
   } = {},
 ) {
+  const cssHash = fs
+    .readdirSync('./public/css')
+    .filter((f) => f.includes('main.'))[0]
+    .split('.')[1];
+  const jsHash = fs
+    .readdirSync('./public/js')
+    .filter((f) => f.includes('main.') && !f.includes('main.js'))[0]
+    .split('.')[1];
   const cdn = process.argv.slice(3)
     ? process.argv.slice(3).toString().replace('-', '') !== 'local'
     : true;
@@ -140,6 +148,8 @@ function buildPages(
             version: releaseVersion,
             date: releaseDate,
           },
+          cssHash,
+          jsHash,
           cdn: cdn ? pkg.cdn : '',
           icons: iconsManifest.icons,
           getYamlData,

build/build-script.js

@@ -1,11 +1,17 @@
 const fs = require('fs');
+const crypto = require('crypto');
 const rollup = require('rollup');
 const { babel } = require('@rollup/plugin-babel');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const Terser = require('terser');
 const replace = require('@rollup/plugin-replace');
 
 function build(cb) {
+  fs.readdirSync('./public/js').forEach((f) => {
+    if (f.includes('main')) {
+      fs.unlinkSync(`./public/js/${f}`);
+    }
+  });
   rollup
     .rollup({
       input: './src/js/main.js',
@@ -23,25 +29,26 @@ function build(cb) {
     .then((bundle) => {
       return bundle.write({
         strict: true,
-        file: './public/js/main-v8.js',
+        file: './public/js/main.js',
         format: 'umd',
         name: 'app',
         sourcemap: true,
-        sourcemapFile: './public/js/main-v8.js.map',
+        sourcemapFile: './public/js/main.js.map',
       });
     })
     .then(async (bundle) => {
       const result = bundle.output[0];
+      const hash = crypto.createHash('md5').update(result.code).digest('hex').slice(0, 6);
 
       const minified = await Terser.minify(result.code, {
         sourceMap: {
           content: result.map,
-          url: 'main-v8.js.map',
+          url: `main.${hash}.js.map`,
         },
       });
 
-      fs.writeFileSync('./public/js/main-v8.js', minified.code);
-      fs.writeFileSync('./public/js/main-v8.js.map', minified.map);
+      fs.writeFileSync(`./public/js/main.${hash}.js`, minified.code);
+      fs.writeFileSync(`./public/js/main.${hash}.js.map`, minified.map);
 
       cb();
     })

build/build-styles.js

@@ -1,11 +1,17 @@
 const fs = require('fs');
+const crypto = require('crypto');
 const path = require('path');
 const gulp = require('gulp');
 const gulpLess = require('gulp-less');
 const connect = require('gulp-connect');
 const cleanCss = require('gulp-clean-css');
 
 function buildLess(cb) {
+  fs.readdirSync('./public/css').forEach((f) => {
+    if (f.includes('main')) {
+      fs.unlinkSync(`./public/css/${f}`);
+    }
+  });
   gulp
     .src(['./src/less/main.less'])
     .pipe(
@@ -17,9 +23,11 @@ function buildLess(cb) {
     .pipe(gulp.dest('./public/css/'))
     .pipe(connect.reload())
     .on('end', () => {
+      const content = fs.readFileSync(path.resolve(__dirname, '../public/css/main.css'));
+      const hash = crypto.createHash('md5').update(content).digest('hex').slice(0, 6);
       fs.renameSync(
         path.resolve(__dirname, '../public/css/main.css'),
-        path.resolve(__dirname, '../public/css/main-v8.css'),
+        path.resolve(__dirname, `../public/css/main.${hash}.css`),
       );
       if (cb) cb();
     });

gulpfile.js

@@ -25,7 +25,7 @@ gulp.task('svelte-demos', buildSvelteDemos.all);
 gulp.task('vue-demos', buildVueDemos.all);
 gulp.task('react-demos', buildReactDemos.all);
 gulp.task('demos', gulp.series(['core-demos', 'svelte-demos', 'vue-demos', 'react-demos']));
-gulp.task('build', gulp.series(['sponsors', 'pug', 'less', 'js', 'demos']));
+gulp.task('build', gulp.series(['sponsors', 'less', 'js', 'pug', 'demos']));
 
 /* =================================
 Watch

src/pug/_docs-template.pug

@@ -18,7 +18,7 @@ html
     link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
     link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3")
     link(href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet")
-    link(rel="stylesheet", href="/css/main-v8.css")
+    link(rel="stylesheet", href=`/css/main.${cssHash}.css`)
   body.body-docs
     include _nav
     main

src/pug/_footer-scripts.pug

@@ -1,5 +1,5 @@
 script(src="https://cdn.jsdelivr.net/npm/@docsearch/js@3")
-script(src="/js/main-v8.js")
+script(src=`/js/main.${jsHash}.js`)
 script.
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

src/pug/_internal-template.pug

@@ -20,7 +20,7 @@ html
     link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
     link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3")
     link(href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet")
-    link(rel="stylesheet", href="/css/main-v8.css")
+    link(rel="stylesheet", href=`/css/main.${cssHash}.css`)
   body
     include _nav
     main