用grunt替换另一个html块 [英] Replace a block of html with another block of html using grunt

问题描述

 < div class =logo> 
< a href =homepage.html>< img src =logo.png>< / a> 
< nav>< a href =＃>登录< / a>< / nav> 
< / div> 
  

我使用grunt自动化我的html模板。所有我想要的是，当我运行grunt任务时，它将取代

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

加上 {{logo}}
，以便最终的html将成为

 < div class =logo> 
 {{logo}} 
< nav>< a href =＃>登录< / a>< / nav> 
< / div> 
  

任何类型的帮助将不胜感激。 Thankx。

解决方案

尝试使用

 'string -replace'：{
 logo：{
文件：[{
 src：'path / to / file.html'，
 dest：'path / to / file.html '
}]，
选项：{
替换：[{
 pattern：'< img src =logo.png>'，
替换： '{{logo}}'
}] 
} 
} 
} 
  

不要忘记加载NpmTask并运行它：

  grunt.loadNpmTasks（'grunt-string -更换'）; 
 grunt.registerTask（'replace'，['string-replace：logo']）; 
  

提示：根据'grunt-string-replace'文档：

使用字符串或正则表达式模式替换文件上的字符串
（...）
grunt-string-replace基本上是String的包装。 prototype.replace你也可以提供一个函数作为替代模式，而不是字符串或模板。

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.

解决方案

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.

这篇关于用grunt替换另一个html块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！