在 gulp 中使用 for 循环时，它给我警告 MaxListenersExceededWarning，还有其他方法吗

Question

我基本上尝试在我的nodeJS项目中使用gulp，我想为每个视图文件（.ejs）制作一个单独的css文件，并将其存储在public/compiled/example/文件夹中。 示例文件夹将具有 ejs 文件的名称，同样，我想将每个编译 css 文件存储到每个 .ejs 文件的特定文件夹中。

例如：我的views文件夹中有10个.ejs文件，我想为每个.ejs文件创建10个单独的CSS文件，并使用该ejs文件的名称。

任务流程：

1. 将每个 ejs 文件与给定的 css 类进行比较（使用 gulp-purgecss）
2. 将它们连接到一个 css 文件中（使用 gulp-concat-css）
3. 缩小 css（使用 gulp-clean-css）
4. 并将其存储在名为 public/complied/[ejs 文件名文件夹]/[ejs 文件名.css] 的文件夹中

但是 Gulp 不具备执行上述操作的功能。

我的代码：

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(''));
        }
    });
}

上面的代码获取视图文件夹中存在的所有文件的名称并将其存储在数组中。

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

这是运行任务的 gulp 代码。

我的错误：

（节点：15588）MaxListenersExceededWarning：检测到可能的EventEmitter内存泄漏。 [DestroyableTransform] 添加了 11 个最终侦听器。使用emitter.setMaxListeners()来增加限制

Gulp 只对我放入的任何文件运行一次，但我不知道它是否有任何类型的内置功能，我可以为我的项目提供这些功能。

最主要的是所有文件都存储在文件夹中，但它会发出此警告。

Answer 1

为了解决这个问题，我修改了这段代码的某些部分，它运行时没有错误。

1. 稍微改变一下功能。

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/".

2. 我创建了一个静态文件数组，而不是动态获取文件名，如下所示：

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

3. 最后我添加了一个 gulp 任务并将其包装到 Files 数组的 for 循环中，以便 gulp 一次处理 1 个任务并一次处理 1 个文件。

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