使用 grunt 将一块 html 替换为另一块 html

Question

我有一块 html 像这样的东西 -

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

我正在使用 g运行t 自动化我的 html 模板。我想要的只是，当我运行 g运行t 任务时它替换

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

和{{logo}} 这样最后的html就会变成

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

我们将不胜感激任何类型的帮助。谢谢。

Answer 1

尝试使用grunt-string-replace，你可以这样做：

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

不要忘记加载 NpmTasks 并且运行它就像：

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

提醒，根据 'grunt-string-replace' 文档：

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.

使用 grunt 将一块 html 替换为另一块 html

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

html

gruntjs