automatically change file reference in index.html after minification in grunt - gruntjs

Question

i am using grunt file in my project. in this file i want to add the process in which it will be able to replace the previous reference of minified file with the new one in index.html.
i am minifying the files with name and date/time e.g mm_10/11/2016_5:00.min.js after its minification the time will be changed mm_10/11/2016_6:30.min.js. but the index page is having the previous file i.e mm_10/11/2016_5:00.min.js. so i want to replace the mm_10/11/2016_5:00.min.js with mm_10/11/2016_6:30.min.js.
kindly help me here
thanks

Answer 1

To make this process dynamic you could consider configuring your grunt Grunfile.js to also generate the minified JavaScript file using grunt-contrib-uglify
So firstly add that plugin to your package via the CLI if you don't already have it installed:
$ npm install grunt-contrib-uglify --save-dev
As the Gruntfile.js is a JavaScript file you can dynamically retrieve the current date/time properties for naming the new minified JavaScript file using the new Date() construct. This can be obtained using an IIFE (Immediately-invoked Function Expression) which assigns the resultant filename value to an object key, (E.g. newJSFileName), inside the function call grunt.initConfig().
You can then use a Regular Expression in the grunt-text-replace task to find the the previous minified filename: E.g.
/src=\"js\/mm_[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,2}.min.js\"/g
The Regex above will match any instances of a string as follows.
src="js/mm_10-12-2016-09-38-59.min.js"
from the <script> tag within your index.html file. E.g.
<script type="text/javascript" src="js/mm_10-12-2016-09-38-59.min.js"></script>
NOTE: The filename show here differs slightly from the naming convention show in my previous post, this time it also includes the seconds prior to the .min.js part. This will avoid issues if the $ grunt command is executed within less than a minute duration from when it was last run.
This seems to work well if you configue your Guntfile.js as follows:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* CREATE THE FILENAME STRING */
newJsFileName: (function() {
// Retrieve the current date and assign parts to variables
var date = new Date(),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear(),
hour = date.getHours(),
mins = date.getMinutes(),
secs = date.getSeconds();
// Prefix the day value with a zero when less than 10
if (month < 10) {
month = '0' + month;
}
// Prefix the day value with a zero when less than 10
if (day < 10) {
day = '0' + day;
}
// Prefix the hour value with a zero when less than 10
if (hour < 10) {
hour = '0' + hour;
}
// Prefix the minutes value with a zero when less than 10
if (mins < 10) {
mins = '0' + mins;
}
// Prefix the seconds value with a zero when less than 10
if (secs < 10) {
secs = '0' + secs;
}
// Concatenate the date properties to form the new
// filename. E.g. mm_10-12-2016-12-52-05.min.js
return 'mm_' + month + '-' + day + '-' + year + '-' + hour + '-' + mins + '-' + secs + '.min.js';
}()),
/* COPY THE HTML FILE */
copy: {
main: {
files: [{
expand: false,
src: 'src/index.html',
dest: 'dist/index.html'
}]
}
},
/* MINIFY THE JAVASCRIPT */
uglify: {
my_target: {
files: {
// NOTE: The source file here that we're looking for is already minified.
// E.g. 'src/js/*.min.js'
// however, you will probably want to replace this accordingly as minifying
// a file that is already minified seems unecessary.
'dist/js/<%= newJsFileName %>': 'src/js/*.min.js' // Destination : Source
}
}
},
/* REPLACE LINK TO CSS IN HTML FILE */
replace: {
javaScriptLink: {
src: ['./dist/index.html'],
overwrite: true,
replacements: [{
// UTILIZE A REGULAR EXPRESSION TO FIND THE PREVIOUS MINIFIED FILE NAME STRING
// FROM WITHIN THE .HTML FILE
from: /src=\"js\/mm_[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,2}.min.js\"/g,
// THE NAME OF THE NEW MINIFIED FILE
to: 'src="js/<%= newJsFileName %>"'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', [
'copy',
'uglify',
'replace:javaScriptLink'
]);
};
Before running the $ grunt command with the configuration shown above you will need to make sure that your index.html has the src attribute of the <script> tag set to use the naming convention that includes the additional seconds attribute, otherwise the Regex defined in the Gruntfile.js will not work. E.g.
<script type="text/javascript" src="js/mm_10-12-2016-09-38-59.min.js"></script>
Also, ensure your JavaScript file is named accordingly.
Hope this helps!