grunt assemble multiple files from one datafile

I am trying to assemble multiple files using one template and one data file

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>

I think I just don't have my grunt file set up correctly:

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']);
};

This question has tantalising clues but I couldn't figure out how to adapt: Using Assemble, generate HTML files from multiple data files using one template file?

I believe the functionality was created after this issue here https://github.com/assemble/assemble/issues/184

标签： gruntjs assemble grunt-assemble

1条回答

smile是对你的礼貌

2楼-- · 2019-08-09 23:28

I finally figured it out:

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>

0人赞添加讨论(0) 举报

grunt assemble multiple files from one datafile

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间