Replace a block of html with another block of html using grunt

问题

I have a block of html something like this -

<div class = "logo">
 <a href = "homepage.html"><img src = "logo.png"></a>
 <nav><a href = "#"> Sign In </a></nav>
</div>

I am automating my html template using grunt. All I want is, when I run grunt task it replace

<a href = "homepage.html"><img src = "logo.png"></a>

with {{logo}} so that the final html will become

<div class = "logo">
 {{logo}}
 <nav><a href = "#"> Sign In </a></nav>
</div>

Any type of help will be appreciated. Thankx.

回答1:

Try to use grunt-string-replace, you can do something like this:

'string-replace': {
    logo: {
        files: [{
            src: 'path/to/file.html',
            dest: 'path/to/file.html'
        }],
        options: {
            replacements: [{
                pattern: '<img src = "logo.png">',
                replacement: '{{logo}}'
            }]
        }
    }
}

Don't forget to loadNpmTask and run it like:

grunt.loadNpmTasks('grunt-string-replace');
grunt.registerTask('replace', ['string-replace:logo']);

Reminder, according to the 'grunt-string-replace' docs:

Replaces strings on files by using string or regex patterns (...) grunt-string-replace is basically a wrapper of String.prototype.replace you can also provide a function as a replacement pattern instead of a string or a template.

来源：https://stackoverflow.com/questions/30099324/replace-a-block-of-html-with-another-block-of-html-using-grunt