我有一个以某种方式进行样式的模板。我有多个内容要在该模板中显示。可以用烘烤做到这一点吗？
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个Sperate文件。模板始终相同。内容上唯一的不同。
在简短地阅读了grunt-bake的文档后，我很确定它 不满足您的要求。像许多其他Grunt模板插件一样，grunt-bake将需要一个单独的.html模板，用于您需要插入的每个文件/内容。IE。每个单独的模板都需要包括其自定义占位符/标记，例如：
<html>
<body>
<!--(bake path/to/your/content1.html)-->
</body>
</html>
...如"项目回购"示例所示。鉴于您的方案，您需要拥有三个.html模板，每个模板都定义了包含内容插入内容的文件的不同路径。这不是你想要的！
但是，在没有grunt插件的情况下达到您的要求并创建自己的自定义任务是相当微不足道的。
以下要点显示了如何实现的：
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 GIST假定构成如下的目录。当然，这可能是不同的，您只需要配置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将使用新创建的.html文件生成build文件夹：
.
└── build
├── file-1.html
├── file-2.html
└── file-3.html
只是跳了起来，提到似乎如文档中所述的grunt-bake库现在支持它
https://github.com/mathiaspaumgarten/grunt-bake#bake-extra-pages-eg-detailpages
也许有些人在2019年或以后搜索此问题可以从中受益：）