如何使用一个包含不同内容的模板来创build独立的文件,使用grunt baker?
我有一个以某种方式devise的模板。 我有多个内容,我想在该模板中显示每个。 烘烤可以做到吗?
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
需要为每个需要插入的文件/内容分别创build一个.html
模板。 即每个单独的模板将需要包括它的自定义占位符/标记,如:
<html> <body> <!--(bake path/to/your/content1.html)--> </body> </html>
…如项目回购示例中所示。 考虑到你的情况,你需要有三个.html
模板,每个模板定义一个不同的path来保存要插入的内容。 这不是你想要的!
但是,如果没有烦人的插件来实现您的需求并且创build您自己的自定义任务 ,那就相当不重要了。
以下要点显示了如何实现:
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}}-->
replace为内容1(2,3等)的内容 。 所以有必要将该评论添加到您的模板。 例如:
<div style="background-color:red"> <!--{{insert}}--> </div>
这当然可以是另一个评论占位符。 您只需确保无论您select什么,都存在于自定义任务的replace
function中,并放置在实际的.html
模板中。
目录结构:
Gruntfile.js
gist假定一个目录结构如下。 这当然可以是不同的,你只需要相应地configurationconfig.template
, config.partials
和config.dest
的path。
. ├── src │ ├── templates │ │ └── template.html │ └── partials │ └── content1.html │ └── content2.html │ └── content3.html ├── Gruntfile.js ├── package.json └── ...
注意: partials
目录中的每个文件只包含要插入模板的内容。 例如content1.html
只是:
<p>Content 1</p>
运行自定义任务
使用上面的Gruntfile.js
gist通过命令行运行$ grunt
将生成一个包含新创build的.html
文件的build
文件夹:
. └── build ├── file-1.html ├── file-2.html └── file-3.html