#!/usr/bin/env node | |
var fs = require('fs'), | |
path = require('path'), | |
cheerio = require('cheerio'), | |
revHash = require('rev-hash'); | |
var rootDir = path.resolve(__dirname, '../'); | |
var wwwRootDir = path.resolve(rootDir, 'platforms', 'browser', 'www'); | |
var buildDir = path.join(wwwRootDir, 'build'); | |
var indexPath = path.join(wwwRootDir, 'index.html'); | |
var cssPath = path.join(buildDir, 'main.css'); | |
var cssFileHash = revHash(fs.readFileSync(cssPath)); | |
var cssNewFileName = `main.${cssFileHash}.css`; | |
var cssNewPath = path.join(buildDir, cssNewFileName); | |
var cssNewRelativePath = path.join('build', cssNewFileName); | |
var jsPath = path.join(buildDir, 'main.js'); | |
var jsFileHash = revHash(fs.readFileSync(jsPath)); | |
var jsNewFileName = `main.${jsFileHash}.js`; | |
var jsNewPath = path.join(buildDir, jsNewFileName); | |
var jsNewRelativePath = path.join('build', jsNewFileName); | |
// rename main.css to main.[hash].css | |
fs.renameSync(cssPath, cssNewPath); | |
// rename main.js to main.[hash].js | |
fs.renameSync(jsPath, jsNewPath); | |
// update index.html to load main.[hash].css | |
$ = cheerio.load(fs.readFileSync(indexPath, 'utf-8')); | |
$('head link[href="build/main.css"]').attr('href', cssNewRelativePath); | |
$('body script[src="build/main.js"]').attr('src', jsNewRelativePath); | |
fs.writeFileSync(indexPath, $.html()); |
# run this command in your terminal to give npm permission to run the cache busting script | |
chmod 755 ./cache-busting.js |
{ | |
"author": "Unboxed Technology", | |
"homepage": "https://www.unboxedtechnology.com/", | |
"scripts": { | |
"build": "ionic cordova build browser --release --prod --no-interactive", | |
"postbuild": "./cache-busting.js" | |
} | |
} |
This script is awesome, thanks @haydenbr and @borodiliz!
I changed the console log output of the @borodiliz's version to be a little more readable because I care about stupid things like that ;).
For anyone interested, I changed the console.log line in this hashFile
function to
console.log(`${fileName}.${fileExtension} >> ${fileName}.${fileHash}.${fileExtension}`);
how about the lazy loaded pages, e.g. 0.js, 1.js etc. ?
Worked for me!
Good solution for lazy loading is described here: https://gist.github.com/meirmsn/9b37d6c500654b9a487e0c0a72583ef2
I am getting Error as below:
./cache-busting.js
'.' is not recognized as an internal or external command,
Is there any solution ? Or is there anything I am missing?
I run npm run build to build the application.
I am getting Error as below:
./cache-busting.js
'.' is not recognized as an internal or external command,
Is there any solution ? Or is there anything I am missing?
I run npm run build to build the application.
In your package.json file, add "postbuild": "node ./cache-busting.js"
after your build scripts like:
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"postbuild": "node ./cache-busting.js",
"lint": "ionic-app-scripts lint",
"docs": "./node_modules/.bin/compodoc -d ./docs/ -p ./tsconfig.json --theme vagrant",
"serve-docs": "./node_modules/.bin/compodoc -s -d ./docs"
}
Thanks @haydenbr for saving my time!. Here my version which also hash polyfills.js and vendor.js: