连接带前缀的 Json 文件答案

【问题标题】：Concat Json files with prefix连接带前缀的 Json 文件
【发布时间】：2016-10-25 11:09:48
【问题描述】：

我想将我的 json 文件与一个 gulp 任务合并，每个 jsonfile 都有一个前缀。

我有几个这样的 json 文件

{
  "en": {
    "title": "Component title english",
    "subtitle": "Component subtitle english",
  },
  "nl": {
    "title": "Component title dutch",
    "subtitle": "Component subtitle dutch",
  }
}

我想将这些与组件名称合并为前缀，因此合并的结果将如下所示：

"componentBlogBox": {
  "en": {
    "title": "Component title english",
    "subtitle": "Component subtitle english",
  },
  "nl": {
    "title": "Component title dutch",
    "subtitle": "Component subtitle dutch",
  }
 }
},
"componentCaseSlider": {
  "en": {
    "title": "Caseslider title english",
    "subtitle": "caseslider subtitle english",
  },
  "nl": {
    "title": "Component title dutch",
    "subtitle": "Component subtitle dutch",
  }
}

我有这个使用节点模块gulp-merge-json 的 gulp 任务，但这只是替换键以形成一个。

gulp.task('json-merge', function(){
  gulp.src(['dest/json/blog-box/home.json', 'dest/json/case-slider/home.json'])
    .pipe(jsonMerge('combined.json'))
    .pipe(gulp.dest('dest/json'));
});

有没有办法使用 gulptask 合并而不编辑我所有的 json 文件？

【问题讨论】：

标签： json merge gulp concat

【解决方案1】：

gulp-merge-json 提供了一个edit 选项，允许您在合并所有文件之前修改每个文件的解析 JSON。

因此，在您的情况下，您所要做的就是将每个文件的解析 JSON 粘贴到一个新对象中，例如 {'componentBlogBox': parsedJson} 并返回它。属性应该是componentBlogBox还是componentCaseSlider可以通过查看文件的路径来判断：

var jsonMerge = require('gulp-merge-json');
var path = require('path');

function camelCase(str) {
  return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
}

gulp.task('json-merge', function(){
  return gulp.src([
      'dest/json/blog-box/home.json', 
      'dest/json/case-slider/home.json'
    ])
    .pipe(jsonMerge({
      fileName: 'combined.json',
      edit: function(parsedJson, file) {
        var component = path.basename(path.dirname(file.path));
        var editedJson = {};
        editedJson[camelCase('component-' + component)] = parsedJson;
        return editedJson;
      }
    }))
    .pipe(gulp.dest('dest/json'));
});

（camelCase 函数的功劳归this answer。）

【讨论】：

【解决方案2】：

很棒的斯文，正是我想要的。骆驼箱的东西并不是必须具备的，但它是进一步发展的一个很好的接触。

我把它简化成这个

gulp.task('json-merge', function(){
  return gulp.src([
      'dest/json/blog-box/home.json',
      'dest/json/case-slider/home.json'
    ])
    .pipe(jsonMerge({
      fileName: 'combined.json',
      edit: function(parsedJson, file) {
        var component = path.basename(path.dirname(file.path));
        var editedJson = {};
        editedJson[component] = parsedJson;
        return editedJson;
      }
    }))
    .pipe(gulp.dest('dest/json'));
});

【讨论】：