CODEWITHSUNDEEP
buildreferencegruntjs
user204088
user204088

Reputation: 1951

Grunt change index.html reference

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.

Upvotes: 2

Views: 1480

Answers (2)

RobC
RobC

Reputation: 24982

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'
]);

};

Upvotes: 2

Ben
Ben

Reputation: 10146

Yes, have a look at grunt-usemin. The README is pretty exhaustive. :)

https://github.com/yeoman/grunt-usemin

Upvotes: 3

Related Questions