1

プロジェクトで Grunt を使い始めたばかりです。私の典型的なプロジェクトには、レイアウト ファイルといくつかのビュー ファイルが含まれています。レイアウト ファイルを使用して、ビュー ファイルごとに 1 つの 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 プラグインを使用すればよいでしょうか?

4

2 に答える 2

0

私のプロジェクトはそれをします！

ライト版https://github.com/thierryc/grunt-handlebars-layouts

このタスクには と の 2 つの必須プロパティが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 では、ハンドルバーとデータ ソースを使用して HTML を生成することもできます。

于 2013-09-05T11:23:38.287 に答える