Concat Json 个带前缀的文件

Question

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

我有几个这样的 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 使用节点模块 gulp-merge-json 的任务，但这只是替换键以形成一个。

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

有没有一种方法可以使用 gulp 任务进行合并，而无需编辑我所有的 json 文件？

Answer 1

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

因此，在您的情况下，您所要做的就是将每个文件的已解析 JSON 粘贴到一个新对象中，例如 {'componentBlogBox': parsedJson} 和 return。属性应该是 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。）

Answer 2

很棒的 Sven，正是我想要的。驼峰式的东西并不是真正的必备品，但它对进一步开发来说是一个很好的接触。

我简化成这样

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

Concat Json 个带前缀的文件

Concat Json files with prefix

merge

json

concat

gulp