如何覆盖在 PurgeCSS CLI 中修改的 css 文件答案

【问题标题】：How to overwrite css files modified in PurgeCSS CLI如何覆盖在 PurgeCSS CLI 中修改的 css 文件
【发布时间】：2022-06-29 17:05:45
【问题描述】：

我正在使用 PurgeCSS CLI 删除我的 React 项目中未使用的 css 类。我正在使用这个命令：purgecss --css src/**/*.css --content src/**/*.js，正在做的是扫描 /src 中的所有 js 文件，检测 css 文件中未使用的类并在控制台中将它们返回给我。 PurgeCSS 包含一个 --output 标志来写入特定目录中更改的文件，有没有办法重写每个文件夹中的 css 文件？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您可以使用编程 API 来执行此操作。

此代码将 purgecss 的内容设置为所有构建的 HTML 和 JS 文件。然后处理每个文件并覆盖该文件。

./scripts/purgecss.mjs

import { readFile, writeFile, stat } from "fs/promises"
import glob from "fast-glob"
import purgecss from "@fullhuman/postcss-purgecss"
import postcss from "postcss"

const sourceFiles = await glob(["./dist/**/*.html", "./dist/**/*.js"], {
  dot: true,
  cwd: process.cwd(),
  onlyFiles: true,
  absolute: true,
})

const cssFiles = await glob(["./dist/**/*.css"], {
  dot: true,
  cwd: process.cwd(),
  onlyFiles: true,
  absolute: true,
})

const postcssProcessor = postcss([
  purgecss({
    content: sourceFiles,
  }),
])

await Promise.all([
  ...cssFiles.map(async (cssFile) => {
    const cssString = await readFile(cssFile, "utf8")
    const { css, map } = await postcssProcessor.process(cssString, { from: cssFile, to: cssFile, map: true })
    await writeFile(cssFile, css)
    if (map !== undefined) {
      await writeFile(cssFile.replace(/\.css$/, ".css.map"), map.toString())
    }
    console.log(`${cssFile}: ${(await stat(cssFile)).size / 1024} KB`)
  }),
])

npm run build && node ./scripts/purgecss.mjs

您需要安装 fast-glob 和 postcss。

【讨论】：