Rename files with version tag to optimize cache
- Avoid caching build files when they are modified.
- Avoid cache invalidation via query string ie: path/file.js?hash=#####
- Rename a file based on a version suplied as parameter and change its reference inside the html file.
npm install rename-me -g
- Develop a Gulp plugin for easy integration
This package is meant to be used with Single Page Applications
Inside the terminal type:
- keep the end / on the destination folder
rename-me file-path-to-rename.js version-number destination/ index.html
rename-me public/js/app.js 1.0.1 public/js/ public/index.html
- multiple parameters are passed inside quotes and comma separeted 'param1', 'param2'
rename-me 'public/js/app.js','public/css/app.css' 1.0.1 'public/js/','public/css/' public/index.html
Install these dependencies
npm install gulp-bump --save-dev
npm install semver --save-dev
npm install rename-me --save-dev
Inside your gulpfile load them
var bump = require('gulp-bump');
var semver = require('semver');
var renameMe = require('rename-me');
Read the package.json file and store it as an object
var pckg = require('./package.json');
Bump the package.json version tag using semver lib
var patch = semver.inc(pckg.version, 'patch');
var minor = semver.inc(pckg.version, 'minor');
var major = semver.inc(pckg.version, 'major');
Define a function to bump the package.json version tag so we can use it
function bumpPackageJson(type) {
return gulp.src(['./package.json'])
.pipe(bump({
version: type
}))
.pipe(gulp.dest('./'));
}
Define the bump version tasks using bumpPackageJson
//PATCH
gulp.task('patch', function () {
return bumpPackageJson(patch);
});
//MINOR
gulp.task('minor', function () {
return bumpPackageJson(minor);
});
//MAJOR
gulp.task('major', function () {
return bumpPackageJson(major);
});
Define the function that will receive the bumped version tag and update the files
function bumpAppFiles(version) {
var options = {};
options.version = version;
options.indexFile = './public/index.html';
options.filePath = ['./public/js/app.js', './public/css/app.css'];
options.outputfolder = ['./public/js/', './public/css/'];
renameMe(options);
}
Define the final task for each bump version type
gulp.task('bump-patch', ['patch'], function renamePatch() {
bumpAppFiles(patch);
});
gulp.task('bump-minor', ['minor'], function renameMinor() {
bumpAppFiles(minor);
});
gulp.task('bump-major', ['major'], function renameMajor() {
bumpAppFiles(major);
});
Finally you should run the rename task manually as the last task, do not chain it with other tasks.
gulp bump-patch