配置

PurgeCSS 有一系列选项，可让你自定义其行为。自定义可以提高 PurgeCSS 的性能和效率。你可以使用以下选项创建一个配置文件。

配置文件

配置文件是一个简单的 JavaScript 文件。默认情况下，JavaScript API 将查找 purgecss.config.js。

module.exports = {
  content: ['index.html'],
  css: ['style.css']
}

然后，你可以使用配置文件使用 PurgeCSS

const purgecss = await new PurgeCSS().purge()
// or use the path to the file as the only parameter
const purgecss = await new PurgeCSS().purge('./purgecss.config.js')

选项

选项由以下类型定义

interface UserDefinedOptions {
  content: Array<string | RawContent>;
  css: Array<string | RawCSS>;
  defaultExtractor?: ExtractorFunction;
  extractors?: Array<Extractors>;
  fontFace?: boolean;
  keyframes?: boolean;
  output?: string;
  rejected?: boolean;
  rejectedCss?: boolean;
  stdin?: boolean;
  stdout?: boolean;
  variables?: boolean;
  safelist?: UserDefinedSafelist;
  blocklist?: StringRegExpArray;
}

interface RawContent {
  extension: string
  raw: string
}

interface RawCSS {
  raw: string
}

type StringRegExpArray = Array<RegExp | string>;

type ComplexSafelist = {
  standard?: StringRegExpArray;
  deep?: RegExp[];
  greedy?: RegExp[];
  variables?: StringRegExpArray;
  keyframes?: StringRegExpArray;
};

type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;

内容

你可以使用文件名或 glob在新窗口中打开数组指定应由 PurgeCSS 分析的内容。这些文件可以是 HTML、Pug、Blade 等。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css']
})

PurgeCSS 也适用于原始内容。为此，你需要传递一个带有 raw 属性的对象，而不是文件名。要与自定义提取器正常配合使用，你需要将 extension 属性与原始内容一起传递。

await new PurgeCSS().purge({
  content: [
    {
      raw: '<html><body><div class="app"></div></body></html>',
      extension: 'html'
    },
    '**/*.js',
    '**/*.html',
    '**/*.vue'
  ],
  css: [
    {
      raw: 'body { margin: 0 }'
    },
    'css/app.css'
  ]
})

CSS

类似于content，你可以使用文件名或glob在新窗口中打开的数组来指定应由 PurgeCSS 处理的 CSS。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css']
})

PurgeCSS 也适用于原始 CSS。为此，你需要传递一个具有raw属性的对象，而不是文件名。

await new PurgeCSS().purge({
  content: [
    {
      raw: '<html><body><div class="app"></div></body></html>',
      extension: 'html'
    },
    '**/*.js',
    '**/*.html',
    '**/*.vue'
  ],
  css: [
    {
      raw: 'body { margin: 0 }'
    }
  ]
})

defaultExtractor

PurgeCSS 可以根据你的需要进行调整。如果你发现很多未使用的 CSS 并未被移除，你可能需要使用自定义提取器。提取器可以根据扩展文件使用。如果你希望对每种类型的文件使用相同的提取器，请在defaultExtractor中指定你的提取器。

await new PurgeCSS().purge({
  // ...
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

extractors

PurgeCSS 可以根据你的需要进行调整。如果你发现很多未使用的 CSS 并未被移除，你可能需要使用自定义提取器。你可以找到可用提取器的列表，它们可以提供更高的准确性和更好的优化，但它们的行为将是针对它们的。这可能会使事情难以推理。

考虑将提取器用作高级优化技术，这可能并非必要。

import purgeFromHTML from 'purge-from-html'

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css'],
  extractors: [
    {
      extractor: purgeFromHTML,
      extensions: ['html']
    },
    {
      extractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      extensions: ['vue', 'js']
    }
  ]
})

你可以在此处了解有关提取器的更多信息。

fontFace（默认值：false）

如果你的 CSS 中有任何未使用的 @font-face 规则，你可以通过将fontFace选项设置为true来移除它们。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css'],
  fontFace: true
})

keyframes（默认值：false）

如果你正在使用 CSS 动画库（例如 animate.css），你可以通过将keyframes选项设置为true来移除未使用的关键帧。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css'],
  keyframes: true
})

variables（默认值：false）

如果你正在使用自定义属性（CSS 变量），或使用它们的库（例如 Bootstrap），你可以通过将variables选项设置为true来移除未使用的 CSS 变量。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css'],
  variables: true
})

rejected（默认值：false）

有时，扫描移除的列表以查看是否有明显错误会更实用。如果你想这样做，请使用rejected选项。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css'],
  rejected: true
})

rejectedCss（默认值：false）

如果你想保留丢弃的 CSS，可以使用rejectedCss选项来实现。

await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css'],
  rejectedCss: true
})

safelist

你可以指示哪些选择器可以安全地保留在最终 CSS 中。这可以通过选项safelist来实现。

此选项有两种形式可用。

safelist: ['random', 'yep', 'button', /^nav-/]

在此表单中，安全列表是一个可以采用字符串或正则表达式的数组。

复杂表单为

safelist: {
    standard: ['random', 'yep', 'button', /^nav-/],
    deep: [],
    greedy: [],
    keyframes: [],
    variables: []
}

例如

const purgecss = await new PurgeCSS().purge({
  content: [],
  css: [],
  safelist: ['random', 'yep', 'button']
})

在此示例中，选择器 .random、#yep、button 将保留在最终 CSS 中。

const purgecss = await new PurgeCSS().purge({
  content: [],
  css: [],
  safelist: [/red$/]
})

在此示例中，以 red 结尾的选择器（例如 .bg-red）将保留在最终 CSS 中。

safelist.deep

你可以使用 safelist.deep 根据正则表达式将选择器及其子级列入安全列表。

const purgecss = await new PurgeCSS().purge({
  content: [],
  css: [],
  safelist: {
    deep: [/red$/]
  }
})

在此示例中，选择器（例如 .bg-red .child-of-bg）将保留在最终 CSS 中，即使未找到 child-of-bg。

safelist.greedy

最后，如果选择器的任何部分与 safelist.greedy 的正则表达式匹配，你可以将整个选择器列入安全列表。

const purgecss = await new PurgeCSS().purge({
  content: [],
  css: [],
  safelist: {
    greedy: [/red$/]
  }
})

在此示例中，选择器（例如 button.bg-red.nonexistent-class）将保留在最终 CSS 中，即使未找到 button 和 nonexistent-class。

阻止列表

阻止列表将阻止 CSS 选择器出现在最终输出 CSS 中。即使 PurgeCSS 认为这些选择器正在使用，它们也会被移除。

blocklist: ['usedClass', /^nav-/]

即使提取器找到了 nav-links 和 usedClass，它们也会被移除。

skippedContentGlobs

如果你为 content 参数提供了 glob，你可以使用此选项排除原本应被扫描的某些文件或文件夹。传递一个 glob 数组，匹配应被排除的项。（注意：如果 content 不是 glob，此选项无效。）

skippedContentGlobs: ['node_modules/**', 'components/**']

在此，PurgeCSS 不会扫描“node_modules”和“components”文件夹中的任何内容。

dynamicAttributes

添加自定义 CSS 属性选择器的选项，例如“aria-selected”、“data-selected”...等。

dynamicAttributes: ["aria-selected"]

# 配置

# 配置文件

# 选项

配置

配置文件

选项