html - 如何使用包含不同内容的一个模板通过grunt bake创建单独的文件？

我有一个以某种方式设置样式的模板。我有多个内容要显示在该模板中。可以这样做烤吗？

https://github.com/MathiasPaumgarten/grunt-bake

例如。：
我的模板如下所示：

<div style="background-color:red">

</div>

内容1：

<p>Content 1</p>

内容2：

<p>Content 2</p>

内容3：

<p>Content 3</p>

它应显示如下：
文件1：

<div style="background-color:red">
  <p>Content 1</p>
</div>

档案2：

<div style="background-color:red">
  <p>Content 2</p>
</div>

文件3：

<div style="background-color:red">
  <p>Content 3</p>
</div>

最后，我得到了3个文件。模板始终相同。内容唯一不同。

最佳答案

简要阅读grunt-bake的文档后，我可以确定它不符合您的要求。像许多其他grunt模板插件一样，grunt-bake将为需要插入的每个文件/内容要求一个单独的.html模板。即每个单独的模板都需要包含其自定义占位符/标记，例如：

<html>
  <body>
    <!--(bake path/to/your/content1.html)-->
  </body>
</html>

...如项目仓库中的example中所示。根据您的情况，您将需要三个.html模板，每个模板都定义了指向要插入内容的文件的不同路径。这不是您想要的！

但是，在没有grunt插件的情况下实现您的要求，而是创建自己的自定义Task相当简单。

以下要点显示了如何实现此目的：

Gruntfile.js

module.exports = function (grunt) {

  // Note: Configure the following paths according to your directory structure...
  var config = {
    // Obtain the content from the template .html file.
    template: grunt.file.read('./src/templates/template.html'),

    // Define the path/glob to the partials/content .html files.
    partials: './src/partials/*.html',

    // Define the path to the output directory where the resultant files
    // should be saved to. Path must include a trailing forwards slash.
    dest: './build/'
  }

  grunt.initConfig({
    // ...
  });

 /**
  * Registers a custom Task to insert content into the template.
  * Loops over each partial .html file and reads its content.
  * The placeholder <!--{{insert}}--> found in the template is replaced
  * with the newly read content/partial and a new file is written to disk.
  */
  grunt.registerTask('buildContent', 'Append partials to template', function() {
    grunt.file.expand(config.partials).forEach(function (file, index) {
      var outputFilePath = config.dest + 'File-' + (index + 1)+ '.html',
        contentToInsert = grunt.file.read(file),
        content = config.template.replace(/<!--{{insert}}-->/g, contentToInsert);

      grunt.file.write(outputFilePath, content);

      // Log message to console.
      grunt.log.writeln('File created: ' + outputFilePath);
    });
  });

  grunt.registerTask('default', [ 'buildContent' ]);
  // ...
};

模板

在Gruntfile.js中，您会看到以下内容：

content = config.template.replace(/<!--{{insert}}-->/g, contentToInsert);

这仅将注释占位符替换为内容1的内容（2,3等）。因此，有必要将该注释添加到您的模板中。例如：

<div style="background-color:red">
<!--{{insert}}-->
</div>

当然，这可以是另一个评论占位符。您只需要确保选择的内容既存在于自定义Task的replace函数中，又位于实际的.html模板中。

目录结构：

Gruntfile.js要点假定目录结构如下。当然这可以有所不同，您只需要相应地配置config.template，config.partials和config.dest的路径。

.
├── src
│   ├── templates
│   │   └── template.html
│   └── partials
│       └── content1.html
│       └── content2.html
│       └── content3.html
├── Gruntfile.js
├── package.json
└── ...

注意：partials目录中的每个文件仅包含要插入模板的内容。例如，content1.html的内容仅为：

<p>Content 1</p>

运行自定义任务

使用上面的$ grunt要点通过命令行运行Gruntfile.js会生成一个build文件夹，其中包含新创建的.html文件：

.
└── build
    ├── file-1.html
    ├── file-2.html
    └── file-3.html

关于html - 如何使用包含不同内容的一个模板通过grunt bake创建单独的文件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46067276/