grunt собрать несколько файлов из одного файла данных

Я пытаюсь собрать несколько файлов, используя один шаблон и один файл данных

data.json

{
  "site": {
    "title": "A Blog",
    "author": "Jon Schlinkert"
  },
  "pages": [
    {
      "metadata": {
        "title": "Blog Post #1",
        "summary": "",
        "categories": [""],
        "layout": "post.hbs",
        "gists": ["5898072"]
      },
      "content": "This would get passed into the `body` tag, but it's not necessary if you only need to add a post from a gist."
    },
    {
      "metadata": {
        "title": "Blog Post #2",
        "summary": "",
        "categories": [""],
        "layout": "post.hbs",
        "gists": ["5898077", "5898078"]
      }
    },
    {
      "metadata": {
        "title": "Blog Post #3",
        "summary": "",
        "categories": [""],
        "layout": "post.hbs",
        "gists": ["5909393"]
      }
    }
  ]
}

template.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{site.title}}</title>
    <link href="http://libs.github.io/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <meta name="author" content="{{site.author}}">
  </head>
  <body>
    {{#each gists}}
      {{gist this}}
    {{/each}}
    {{> body }}
    <script src="http://libs.github.io/bootstrap/css/bootstrap.min.js"></script>
  </body>
</html>

Я думаю, что у меня не правильно настроен файл grunt:

module.exports = function(grunt) {  

    // Project configuration.
    grunt.initConfig({
        assemble: {
            pages: {
                options: {
                    flatten: true,
                    data: './src/data/data.json'
                },
                files: [
                    // currently we need to trick grunt and assemble into putting the pages file into the correct
                    // place using this pattern
                    { dest: './dist/', src: './src/templates/template.hbs' }
                ]
            }
        },
        clean: {
            options: { force: true },
            all: ['./dist/*.html']
        }
    });
    grunt.loadNpmTasks('grunt-assemble');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean', 'assemble']);
};

Этот вопрос имеет дразнящие подсказки, но я не мог понять, как адаптироваться: Используя Assemble, генерировать файлы HTML из нескольких файлов данных, используя один файл шаблона?

Я считаю, что функциональность была создана после этой проблемы здесь https://github.com/assemble/assemble/issues/184

Источник

1 ответ

Я наконец-то понял:

Gruntfile.js

module.exports = function(grunt) {  

    // Project configuration.
    grunt.initConfig({
        data : grunt.file.readJSON('src/data/data.json'),
        assemble: {
            inline_pages: {
                options: {
                    layout: "./src/templates/post.hbs",
                    site: {
                        title: "A Blog",
                        author: "Jon Schlinkert"
                    },
                    pages: '<%= data.pages %>'
                },
                files: {
                  'dist/': ['!*']
                }
            }
        },
        clean: {
            options: { force: true },
            all: ['./dist/*.html']
        }
    });

    grunt.loadNpmTasks('grunt-assemble');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean', 'assemble']);
};

data.json

{
    "pages": [
        {
            "filename": "post1",
            "data": {
                "title": "Blog Post #1",
                "gists": ["5898072"]
            },
            "content": "This would get passed into the `body` tag, but it's not necessary if you only need to add a post from a gist."
        },
        {
            "filename": "post2",
            "data": {
                "title": "Blog Post #2",
                "gists": ["5898077", "5898078"]
            }
        },
        {
            "filename": "post3",
            "data": {
                "title": "Blog Post #3",
                "gists": ["5909393"]
            }
        }
    ]
}

post.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{site.title}}</title>
    <link href="http://libs.github.io/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <meta name="author" content="{{site.author}}">
  </head>
  <body>

    The page title is {{{this.title}}}
    The gist number is {{{this.gists}}}

    This is the body:
    {{> body}}
    <script src="http://libs.github.io/bootstrap/css/bootstrap.min.js"></script>
  </body>
</html>
Источник
Другие вопросы по тегам