CODEWITHSUNDEEP
javascriptgulp
Jasmine Ibikunle
Jasmine Ibikunle

Reputation: 139

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.

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.

Upvotes: 0

Views: 893

Answers (1)

Sergey Mell
Sergey Mell

Reputation: 8040

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

});

Upvotes: 1

Related Questions