如何使用一个包含不同内容的模板来创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什么,都存在于自定义任务的replacefunction中,并放置在实际的.html模板中。

目录结构:

Gruntfile.js gist假定一个目录结构如下。 这当然可以是不同的,你只需要相应地configurationconfig.templateconfig.partialsconfig.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