Question

我刚开始在我的项目中使用Grunt。我的典型项目包括布局文件和多个视图文件。我想使用布局文件为每个视图文件生成一个HTML页面。

例如，这是一个布局文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Some title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- some css -->
  </head>
  <body>

  <!-- some js -->
  </body>
</html>

和一个视图文件：

<h1>Lorem</h1>
<p>Some other stuff</p>

我希望得到的结果是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Some title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- some css -->
  </head>
  <body>

    <h1>Lorem</h1>
    <p>Some other stuff</p>

  <!-- some js -->
  </body>
</html>

根据快速Google搜索，有许多插件表示他们可以生成HTML，例如grunt-html-build和grunt-generator。我仔细研究了grunt-html-build，但它似乎不符合我的需要。那么我应该使用哪个Grunt插件，这样我才能得到我想要的结果？

Answer 1

您可以使用一系列简单的HTML部分和Grunt Concat将它们拼凑在一起。

你的Gruntfile看起来像这样：

concat:
  partials:
    options:
      process: true
    files:
      # destination as key, sources as value
      "dist/index.html": ["partials/_header.html", "partials/_home-page.html", "partials/_footer.html"]

修改

我已经开始使用Assemble执行此任务了。 Assemble还允许您使用Handlebars和数据源来生成HTML。

Answer 2

我的项目就这样做了！

简易版https://github.com/thierryc/grunt-handlebars-layouts

此任务有两个必需的属性src和dest。 src是源文件的路径，dest是此任务将写入的文件（相对于grunt.js文件）。如果此文件已存在，则会覆盖。

  files: {
    'dest.html': 'src.html'
  },

示例配置如下所示：

  grunt.initConfig({
    handlebarslayouts: {
      home: {
        files: {
          'dist/home.html': 'src/home.html'
        },
        options: {
          partials: [
            'src/partials/*.hbs',
            'src/layout.html'
          ],
          modules: [
            'src/helpers/helpers-*.js'
          ],
          basePath: 'src/',
          context: {
            title: 'Layout Test',
            items: [
              'apple',
              'orange',
              'banana'
            ]
          }
        }
      }
    }
  });
  grunt.registerTask('default', ['handlebarslayouts']);

```

如何使用Grunt使用视图和布局生成HTML页面？

2 个答案: