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

Question

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.

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)

2) Pull information from modules-guide.json to populate html file.

I've tried creating a gulp task which pulls the modules and outputs it into the 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.

Sergey Mell · Accepted Answer · 2019-08-14 16:28:06Z

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

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:

reading files from a directory
parsing their names into a correct format
saving to JSON and storing it on disk

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);

});

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related