[英]How to build a json file that contains data from the projects src directory?
I'm creating a guide which will be a source of truth. 我正在创建一个指南,它将成为真理的源头。 I've got all my modules in a folder and all my page templates in another.
我的所有模块都放在一个文件夹中,所有页面模板都放在另一个文件夹中。 I'm creating a page which will display the modules and templates.
我正在创建一个页面,其中将显示模块和模板。 Whenever a new module or template is created it needs to be added straight to this page.
每当创建新模块或模板时,都需要直接将其直接添加到此页面。 I need the gulp task to automatically add the module to a json file which I then pull from.
我需要gulp任务来自动将模块添加到json文件中,然后再从中提取。
1) Create gulp task that pulls files from src and populates json file ("modules-guide.json") the following details as an array: - Name (taken from the file name, removing the dashes and replacing it with spaces) - File name (same as file name minus the extension) - Id (same as file name minus extension) 1)创建gulp任务,该任务从src中提取文件并以数组的形式填充json文件(“ modules-guide.json”)以下详细信息:-名称(取自文件名,删除破折号并将其替换为空格)-文件名称(与文件名减扩展名相同)-ID(与文件名减扩展名相同)
2) Pull information from modules-guide.json to populate html file. 2)从modules-guide.json中提取信息以填充html文件。
I've tried creating a gulp task which pulls the modules and outputs it into the modules-guide.json 我尝试创建一个gulp任务,将模块拉出并将其输出到modules-guide.json中
The file structure: 文件结构:
//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'))); });
I expect the output to be a page with modules that are automatically created when we create a new file. 我希望输出是一个页面,其中包含我们创建新文件时自动创建的模块。 We don't want to manually add the files to the guide.
我们不想手动将文件添加到指南中。
Create gulp task that pulls files from src and populates JSON file
创建从src中提取文件并填充JSON文件的gulp任务
The solution you proposed just copies the files from the source folder to destination one. 您提出的解决方案只是将文件从源文件夹复制到目标文件夹。 As to me, your task should consist of three stages:
对我来说,您的任务应包括三个阶段:
It can be done as follows: 可以按照以下步骤完成:
// 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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.