如何构建包含项目 src 目录中数据的 json 文件？

Question

我正在创建一个指南，它将成为真实的来源。我将所有模块放在一个文件夹中，将所有页面模板放在另一个文件夹中。我正在创建一个将显示模块和模板的页面。每当创建新模块或模板时，都需要将其直接添加到此页面。我需要 gulp 任务来自动将模块添加到 json 文件，然后我从中提取。

1) 创建 gulp 任务，从 src 中提取文件并填充 json 文件 ("modules-guide.json") 以下详细信息作为数组： - 名称（取自文件名，删除破折号并用空格替换） - 文件名（与文件名减去扩展名相同） - Id（与文件名减去扩展名相同）

2) 从 modules-guide.json 中提取信息以填充 html 文件。

我已经尝试创建一个 gulp 任务来拉取模块并将其输出到模块中-guide.json

文件结构：

//templates
+-- index.ejs
+-- aboutUs.ejs
+-- modules
|   +-- header.ejs
+-- components
|   +-- heading.ejs
|   +-- buttons.ejs

import path from 'path'
import gulp from 'gulp'

const jsonGuideData = './src/content/modules-guide.json';


gulp.task('module-guide', function(){
    gulp.src(path.join(src, 'templates/modules/**'))
    .pipe(gulp.dest(path.join(src, 'content/modules-guide.json')));
});

我希望输出是一个页面，其中包含我们创建新文件时自动创建的模块。我们不想手动将文件添加到指南中。

Answer 1

Create gulp task that pulls files from src and populates JSON file

您提出的解决方案只是将文件从源文件夹复制到目标文件夹。对我来说，你的任务应该包括三个阶段：

正在从目录中读取文件
正在将他们的名字解析为正确的格式
保存到 JSON 并将其存储在磁盘上

可以这样操作：

// Importing requied libraries
const gulp = require('gulp');
const glob = require('glob');
const fs = require('fs');
const path = require('path');

// Setuping constants
const ORIGINAL_JSON = './modules-guide.json';
const DIR_TO_READ = './**/*';

// Task
gulp.task('module-guide', function (cb) {

    // Getting the list of all the files
    const fileArray = glob.sync(DIR_TO_READ);

    // Mapping the files into your structure
    const fileStruct = fileArray.map(file => {

        // Skipping directories if any
        if (fs.lstatSync(file).isDirectory()) {
            return null;
        }

        const fileName = path.basename(file, path.extname(file));
        const name = fileName.replace('-', ' ');
        const id = fileName;

        return {
            name, fileName, id
        }
    });

    // Removing `nulls` (previously they were directories)
    const jsonGuideData = {files: fileStruct.filter(file => !!file)};

    // Storing results to JSON
    fs.writeFile(ORIGINAL_JSON, JSON.stringify(jsonGuideData), cb);

});

如何构建包含项目 src 目录中数据的 json 文件？

How to build a json file that contains data from the projects src directory?

javascript

gulp