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

Question

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

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

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

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

并生成输出文件：

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

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

Answer 1

我以前用过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/'
    }
  }
})

Answer 2

你可以试试 grunt-template which processed lo-dash templates。这是解决您的问题的基本设置：

//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>

Answer 3

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

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

generating templates with grunt - looking for a task

javascript

templates

task

node.js

gruntjs