使用 grunt 生成模板 - 寻找任务答案

【问题标题】：generating templates with grunt - looking for a task使用 grunt 生成模板 - 寻找任务
【发布时间】：2015-05-14 20:28:58
【问题描述】：

我有一个包含以下内容的 HTML 文件：

<html>
  <body>
    <span>{{ secret }}</span>
  </body>
</html>

我正在寻找一个可以获取此源文件的繁重任务，获取值映射：

grunt.initConfig({
  myTask: {
    myTarget: {
      src: ...
      dest: ...
      values: {
        secret: 'ABC'
      }
    }
  }
})

并生成输出文件：

<html>
  <body>
    <span>ABC</span>
  </body>
</html>

有这样的任务吗？我看到了grunt-mustache-html，但它迫使很多东西存在，我真的不需要而且我不想使用它。我只想拿一个小胡子（或 hbs 或其他什么），用来自 grunt 级对象的数据填充它，然后将结果转储到另一个 HTML 文件中，仅此而已。

【问题讨论】：

标签： javascript node.js templates gruntjs task

【解决方案1】：

您可以尝试处理lo-dash templates 的grunt-template。这是解决您的问题的基本设置：

//Gruntfile.js
config.template = {
    myTask: {
        options: {
            data: function () {
                return {
                    secret: 'ABC' 
                };
            }
        },
        files: {
            'output.html: ['template.html.tpl']
        }
    }
};

//template.html.tpl
<html>
   <body>
      <span><%= secret %></span>
   </body>
</html>

【讨论】：

【解决方案2】：

#1。一种选择是使用 grunt.template 实用程序（请参阅 lagerone 的答案）。使用自定义分隔符，您可以获得非常接近您想要的结果：

grunt.template.addDelimiters('myDelimiters', '{{', '}}');

在这种情况下，您的模板必须使用{{= secret }} 标签。

#2。另一种选择是您始终可以编写自己的简单任务。在您的情况下，它可能如下所示：

grunt.initConfig({
    myTask: {
        options: {
            data: {
                secret: 'ABC'
            },
            src:  'index.html',
            dest: 'index.output.html'
        }
    }
});

grunt.registerTask('myTask', function() {

    var options = this.options(),
        template = grunt.file.read(options.src);

    var content = template.replace(/\{\{\s*(.*?)\s*\}\}/g, function(a, b) {
        return typeof options.data[b] !== undefined ? options.data[b] : '';
    });

    grunt.file.write(options.dest, content);
});

grunt.registerTask('default', ['myTask']);

【讨论】：

【解决方案3】：

我过去使用过grunt-include-replace。易于使用。在您的 gruntfile 中，您将创建一个与此类似的任务（示例取自官方 github repo）：

grunt.initConfig({
  includereplace: {
    your_target: {
      options: {
      // Task-specific options go here.
      },
  // Files to perform replacements and includes with
  src: '*.html',
  // Destination directory to copy files to
      dest: 'dist/'
    }
  }
})

【讨论】：