Combine JSON files with grunt-contrib-concat

Question

I'm looking for the best way to combine json files in a folder.

With HTML, CSS and JavaScript this is pretty easy since you don't need a separator or only a single ; . However, with JSON, we need something more to make it a valid JSON object.

One way would be to concatenate the files with , and wrap everything in an array. I'm wondering if there is an better/easier way to do this.

Gruntfile.js

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        json: {
            src: ['src/**/*.json'],
            dest: 'dist/combined.json',
            options: {
              ...
            }
        }
    }
});

src/file1.json

{
    "number": 1
}

src/file2.json

{
    "number": 2
}

dist/combined.json

This would be the desired outcome:

{
    "numbers": [
        {
            "number": 1
        },
        {
            "number": 2
        }
    ]
}

Answer 1

You should be able to use the banner and footer options.

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        json: {
            src: ['src/**/*.json'],
            dest: 'dist/combined.json',
            options: {
                // Added to the top of the file
                banner: '{"numbers": [',
                // Will be added at the end of the file
                footer: "]}",
                separator: ','
            }
        }
    }
});

Answer 2

You may use grunt-merge-json for that.

Usage Example:

Assuming we have the following types of source JSON files:

src/foo/foo-en.json:
{
    "foo": {
        "title": "The Foo",
        "name":  "A wonderful component"
    }
}
src/bar/bar-en.json:
{
    "bar": {
        "title": "The Bar",
        "name":  "An even more wonderful component"
    }
}

Assuming we want to generate the following destination JSON file:

{
    "foo": {
        "title": "The Foo",
        "name":  "A wonderful component"
    },
    "bar": {
        "title": "The Bar",
        "name":  "An even more wonderful component"
    }
}

Single file per target variant

grunt.initConfig({
    "merge-json": {
        "en": {
            src: [ "src/**/*-en.json" ],
            dest: "www/en.json"
        },
        "de": {
            src: [ "src/**/*-de.json" ],
            dest: "www/de.json"
        }`enter code here`
    }
});

Multiple files per target variant

grunt.initConfig({
    "merge-json": {
        "i18n": {
            files: {
                "www/en.json": [ "src/**/*-en.json" ],
                "www/de.json": [ "src/**/*-de.json" ]
            }
        }
    }
});

Answer 3

You should use a dedicated and JSON oriented plugin to handle that. Not just an arbitrary string concat.

Take a look at https://github.com/rse/grunt-merge-json or https://github.com/shinnn/grunt-merge-data