# Grunt 插件

# 安装

npm install grunt-purgecss --save-dev

安装此插件后,可以在 Gruntfile 中添加如下 JavaScript 代码来使用它:

grunt.loadNpmTasks('grunt-purgecss');

# "purgecss" 任务

# 概览

在项目的 Gruntfile 文件中,在参数对象中添加一个名为 purgecss 的配置段并传递给 grunt.initConfig() 函数。

grunt.initConfig({
    // Configuration to be run (and then tested).
    purgecss: {
      my_target: {
        options: {
          content: ['./src/**/*.html']
        },
        files: {
          'dist/app.css': ['src/css/app.css']
        }
      }
    }
  });

# 参数

PurgeCSS 的所有参数都可以在插件中使用。 以下列出了可以使用的主要参数。有关完整列表,请访问 Purgecss 文档

# options.content

类型: string | Object

你可以使用文件名或 Glob 数组指定 Purgecss 应该分析的内容。这些文件可以是 HTML、Pug、Blade等。

# options.extractors

类型: Array<Object>

Purgecss 可以适应你的需求。如果你发现许多未使用的 CSS 没有被删除,则可能要使用自定义提取器。有关提取器的更多信息,请参见 这里

# options.whitelist

类型: Array<string>

您可以将选择器加入白名单中,以阻止 Purgecss 从 CSS 中删除它们。这可以通过 whitelistwhitelistPatterns 参数来实现。

# options.whitelistPatterns

类型: Array<RegExp>

你可以通过 whitelistPatterns 参数使用正则表达式匹配选择器并加入白名单中。

# options.keyframes

类型: boolean 默认值: false

如果使用的是 animate.css 之类的 CSS 动画库,则可以通过将 keyframes 参数设置为 true 来删除未使用的关键帧。

# options.fontFace

类型: boolean 默认值: false

如果 CSS 中包含有任何未使用的 @font-face 规则,则可以通过将 fontFace 参数设置为 true 来删除它们。

# 示例

以下示例展示了主要参数的用法。

grunt.initConfig({
    // Configuration to be run (and then tested).
    purgecss: {
      my_target: {
        options: {
          content: ['./src/**/*.html', `src/**/*.js`, 'src/**/*.blade', 'src/**/*.vue'],
          extractors: {
            extractor: class {
                static extract(content) {
                    content.match(/a-Z/) || []
                }
            },
            extension: ['html', 'blade']
          },
          whitelist: ['random', 'yep', 'button'],
          whitelistPatterns: [/red$/],
          keyframes: true,
          fontFace: true
        },
        files: {
          'dist/app.css': ['src/css/app.css']
        }
      }
    }
  });