1

我刚刚开始在我的项目中使用 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>

基于快速谷歌搜索，有许多插件说它们可以生成 HTML，例如grunt-html-build和grunt-generator. 我仔细看了看grunt-html-build，但它似乎不符合我的需要。那么我应该使用哪个 Grunt 插件才能获得我想要的结果？

4

2 回答 2

0

我的项目就是这样做的！

轻量版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']);

```

于 2015-03-22T07:32:27.153 回答
0

您可以只使用一系列简单的 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。

于 2013-09-05T11:23:38.287 回答