我有一个以某种方式设计样式的模板。我有多个内容想要在该模板中显示每个内容。可以用烘焙来做到这一点吗？
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您需要插入的每个文件/内容的模板。 IE。每个单独的模板都需要包含其自定义占位符/标记，例如:
<html>
<body>
<!--(bake path/to/your/content1.html)-->
</body>
</html>
...如example所示在项目 repo 协议(protocol)上。根据您的情况，您需要三个 .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 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>
运行自定义任务
正在运行$ grunt通过命令行使用 Gruntfile.js上面的要点将生成 build包含新创建的 .html 的文件夹文件:
.
└── build
├── file-1.html
├── file-2.html
└── file-3.html
关于html - 如何使用包含不同内容的同一个模板创建单独的文件和 grunt Baker？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46067276/