GULP 从另一个 JSON 文件创建 JSON 文件

Question

我正在尝试创建一个格式化为 json 的本地 lang 文件。我在下面有以下 json 格式的导航。我需要使用 GULP 创建一个新的 JSON 文件来创建一个 lang 文件(见下文(

  "lists": [
    {
      "title": "Application Intel",
      "items": [
        {
          "title": "Analytics Dashboard",
          "href": "intel_analytics_dashboard.html"
        },
        {
          "title": "Marketing Dashboard",
          "href": "intel_marketing_dashboard.html"
        },
        {
          "title": "CEO Dashboard",
          "href": "intel_ceo_dashboard.html"
        },
        {
          "title": "Introduction",
          "href": "intel_introduction.html"
        },
        {
          "title": "Build Notes",
          "href": "intel_build_notes.html",
          "text": "Build Notes",
          "span": {
            "class": "",
            "text": "v{{version}}"
          }
        }
      ]
    }

我需要创建一个类似于以下 json 的文件：

  "nav": {
    "application_intel": "Application Intel",
    "intel_analytics_dashboard": "Analytics Dashboard",
    "intel_marketing_dashboard": "Marketing Dashboard",
    "intel_ceo_dashboard": "CEO Dashboard",
    "intel_introduction": "Introduction",
    "intel_build_notes": "Build Notes",
  }

最好的

方法是什么？

Answer 1

这是解决方案。假设您在src中有nav.json文件，并且想要更改其形状并将其放入dest目录中。您可以从内部实现这一点gulpfile.js

const { src, dest } = require("gulp");
const through = require("through2");
// gulp task
function json() {
  return src("src/nav.json")
    .pipe(
      through.obj((file, enc, cb) => {
        // get content of json file
        const rawJSON = file.contents.toString();
        // parse raw json into javscript object
        const parsed = JSON.parse(rawJSON);
        // transform json into desired shape
        const transformed = transformJson(parsed);
        // make string from javascript obj
        const stringified = JSON.stringify(transformed, null, 2);
        // make bufer from string and attach it as current file content
        file.contents = Buffer.from(stringified);
        // pass transformed file into next gulp pipe
        cb(null, file);
      })
    )
    .pipe(dest("dest"));
}
// transformation
function transformJson(input) {
  const result = { nav: {} };
  // read json field by field
  Object.keys(input).forEach(topLevelKey => {
    // current object
    const topLevelItem = input[topLevelKey];
    // in your design topLevelItems are arrays
    topLevelItem.forEach(menuItem => {
      if (menuItem.title) {
        // make url either from item href or title
        const itemUrl = makeUrl(menuItem.href || menuItem.title);
        result.nav[itemUrl] = menuItem.title;
      }
      // prcoess children
      if (menuItem.items) {
        menuItem.items
          .filter(child => !!child.title) // process only child items with title
          .forEach(child => {
            const childUrl = makeUrl(child.href || child.title);
            result.nav[childUrl] = child.title;
          });
      }
    });
  });
  return result;
}
// helper func
function makeUrl(href) {
  return href
    .toLowerCase()
    .replace(/.html$/, "")
    .replace(/s/g, "_");
}
// export for use in command line
exports.json = json;

json转换函数是Eachy的，如果你有深度嵌套的导航结构，也许你应该把它改成递归的东西