Grunt change index.html reference - build

Question

When using grunt is it possible to alter the references within a html file.
For example as part of my build process I am altering the filename from style.css to style.min.css.
What I would like to do is within my index.html file alter the reference to the stylesheet to use the minified version.

Answer 1

Yes, have a look at grunt-usemin. The README is pretty exhaustive. :)
https://github.com/yeoman/grunt-usemin

Answer 2

Another possible solution, which avoids defining block comments in your html markup, is to install the plugin named: grunt-text-replace
installing the plugin via npm:
$ npm install grunt-text-replace --save-dev
and then and add the following to your Gruntfile:
Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* UPDATES CSS SRC REFERENCED IN YOUR THE HTML FILE */
replace: {
cssLink: {
src: ['./src/index.html'], //<--- The path to your html file
overwrite: true,
replacements: [{
// Subsitute src="css/ below with the path to your CSS file.
from: 'src="css/style.css',
// Subsitute src="css/ above with the path to your minified CSS file.
to: 'src="css/style.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-text-replace');
grunt.registerTask('default', [
'replace:cssLink'
]);
};