Question

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

我有几个这样的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文件？

Answer 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。）

Answer 2

令人敬畏的斯文，正是我所寻找的。 camelcase并不是必须拥有的东西，但它对于进一步开发来说是个不错的选择。

我把它简化为这个

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文件

2 个答案: