when using for loop in gulp, It gives me warning of MaxListenersExceededWarning, is there any other way to do it

I am basically trying to use gulp in my nodeJS project where I want to make a separate css files for every view file (.ejs), and store it in a public/compiled/example/ folder. The example folder will have the name of the ejs file, likewise I want to store every compile css file to a specific folder for every .ejs file.

For example: there are 10 .ejs Files in my views folder and I want to make 10 separate CSS files for every .ejs file with the name of that ejs file.

Flow of task:

Compare every ejs file with given css for classes (using gulp-purgecss)
Concatenate them in one css file (using gulp-concat-css)
Minify that css (using gulp-clean-css)
And Store it in a folder called public/complied/[ejs filename folder]/[ejs filename.css]

But Gulp does not have that functionality to do the above thing.

My code:

const Path = require("path");
const FS   = require("fs");
let Files  = [];
function getDirectoryName(Directory) {
    FS.readdirSync(Directory).forEach(File => {
        const Absolute = Path.join(Directory, File);
        if (FS.statSync(Absolute).isDirectory()) {
            getDirectoryName(Absolute);
        }
        else {
            return Files.push(Absolute.split('\\').join('/').split('.ejs').join('').split('views/').join(''));
        }
    });
}

Above code get all the names of the files present in the views folder and stores it in an array.

let bootstrap = src('public/css/bootstrap.min.css')
let style = src('public/css/style.css')
let icons = src('public/css/icons.css')
let colours = src('public/css/colors/default.css')
let tinySlider = src('public/css/tiny-slider.css')
//File Path Variables
const folderPath = 'views/';
const ejsExtension = '.ejs';
const cssExtension = '.css';
const jsExtension = '.js';

// CSS Task
function cssTask() {
    getDirectoryName("./views/");
    let bootstrap = src('public/css/bootstrap.min.css')
    let style = src('public/css/style.css')
    let icons = src('public/css/icons.css')
    let colours = src('public/css/colors/default.css')
    let tinySlider = src('public/css/tiny-slider.css')
    for (let i = 0; i < Files.length; i++) {
    merge(bootstrap, style, icons, colours, tinySlider)
        .pipe(purgecss({ content: [folderPath + Files[i] + ejsExtension] }))
        .pipe(concatCss(Files[i] + cssExtension))
        .pipe(cleanCSS())
        .pipe(dest('./public/compiled/' + Files[i])
    );
    }
}

And this is the gulp code which runs a task.

My error:

(node:15588) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners added to [DestroyableTransform]. Use emitter.setMaxListeners() to increase limit

Gulp only runs once for whatever file I put in but I don't know weather it has any kind of inbuilt functionality that I can you for my project.

And the main thing is all the file is getting stored in the folder but it gives this warning with it.

Solution

To solve this problem, I reformed some parts of this code, which works without errors.

Change the function a little bit.

function cssTask(fileName) {
  return src([bootstrapCss, styleCss, iconsCss, coloursCss, tinySliderCss])
    .pipe(purgecss({ content: [viewsFolderPath + fileName + ejsExtension] }))
    .pipe(concatCss(Path.basename(fileName) + cssExtension))
    .pipe(cleanCSS())
    .pipe(dest(cssDest + Path.dirname(fileName)));
}

Note: Here cssDest is the destination folder you want to store the file in this case it would be "./public/compiled/".

I created a static Files array instead of getting the files name dynamically, with something like this:

let Files = ['about', 'contact', 'blog/index'];

At last I added a gulp task and wrapped it into a for loop of the Files array, so that gulp on 1 task at a time and handles 1 file at a time.

for (let i = 0; i < Files.length; i++) {
  task("css:" + Files[i], () => {
    return cssTask(Files[i]);
  });
}