如何使用包含不同的内容与咕噜烘一个模板来创建单独的文件？-电脑我帮您

如何使用包含不同的内容与咕噜烘一个模板来创建单独的文件？

我有一个以某种方式风格的一个模板。我有我想要显示每个模板内的多个内容。是否有可能做到这一点与烤？

例如：我的模板看起来是这样的：

<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-bake将需要为每个文件/内容，您需要插入一个独立的.html模板。即每个单独的模板将需要包括它的自定义的占位符/标记，如：

<html>
  <body>
    <!--(bake path/to/your/content1.html)-->
  </body>
</html>

......如在项目回购的example。鉴于你的情况，你就需要有三个.html模板，每个定义到包含插入内容的文件不同的路径。这是不是你想要的！

然而，这是相当琐碎达到你的要求没有咕噜插件，并创建自己的自定义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);

这只是替换与内容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>

运行自定义任务

通过使用上述qazxsw POI要点将产生与新创建$ grunt文件Gruntfile.js文件夹中的命令行运行qazxsw POI：

build