Question

我正在尝试创建一个本地lang文件，该文件将被格式化为json。我下面有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

这是解决方案。假设您在nav.json中有src个文件，并且想要更改其形状并将其放置在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转换函数有点 forEachy ，如果您具有深层嵌套的导航结构，也许应该将其更改为递归

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

1 个答案: