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-level对象的数据填充它，然后将结果转储到另一个HTML文件中，就是这样。

Answer 1

您可以尝试处理grunt-template的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 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']);

Answer 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/'
    }
  }
})

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

3 个答案: