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

Question

我有一个以特定方式设置样式的模板。我有多个内容，我想在该模板中显示每个内容。可以用 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 个单独的文件。模板总是一样的。唯一不同的是内容。

Answer 1

在简要阅读 grunt-bake 的文档后，我很确定它不满足您的要求。与许多其他 grunt 模板插件一样，grunt-bake 需要为每个需要插入的 file/content 单独的 .html 模板。 IE。每个单独的模板都需要包含它的自定义 placeholder/marker 例如：

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

这当然可以是另一个评论占位符。您只需要确保您选择的任何内容都存在于自定义任务的 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

Answer 2

顺便提一下，grunt-bake 库现在似乎支持它，正如文档中提到的那样

https://github.com/MathiasPaumgarten/grunt-bake#bake-extra-pages-eg-detail-pages

也许一些在 2019 年或之后搜索此内容的人可以从中受益:)

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

How to create seperate files using one template that contains different content with grunt bake?

html

node.js

web

gruntjs