如何使用一个包含不同内容的模板和 grunt bake 创建单独的文件？
Posted
技术标签:
【中文标题】如何使用一个包含不同内容的模板和 grunt bake 创建单独的文件？【英文标题】：How to create seperate files using one template that contains different content with grunt bake? 【发布时间】：2018-02-14 11:25:15 【问题描述】：我有一个以某种方式设置样式的模板。我有多个要在该模板中显示的内容。烘焙可以做到这一点吗？
https://github.com/MathiasPaumgarten/grunt-bake
例如： 我的模板如下所示：
<div style="background-color:red">
</div>
内容一：
<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 个单独的文件。模板始终相同。唯一不同的是内容。
【问题讨论】：
【参考方案1】：简要阅读了grunt-bake 的文档，我很确定它不满足您的要求。像许多其他 grunt 模板插件一样，grunt-bake 将需要一个单独的.html 模板来处理您需要插入的每个文件/内容。 IE。每个单独的模板都需要包含它的自定义占位符/标记，例如：
<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);
这只是将评论占位符<!--insert--> 替换为内容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>
运行自定义任务
使用上面的Gruntfile.js 要点通过命令行运行$ grunt 将生成一个build 文件夹，其中包含新创建的.html 文件：
.
└── build
├── file-1.html
├── file-2.html
└── file-3.html
【讨论】：
【参考方案2】：顺便提一下，grunt-bake 库现在似乎支持它，如文档中所述
https://github.com/MathiasPaumgarten/grunt-bake#bake-extra-pages-eg-detail-pages
也许一些在 2019 年或之后搜索此内容的人可以从中受益:)
【讨论】：
以上是关于如何使用一个包含不同内容的模板和 grunt bake 创建单独的文件？的主要内容，如果未能解决你的问题，请参考以下文章
使用 jinja 使用块内容时如何包含不同的 js 和 css 文件