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.safelist

你可以配置将哪些选择器保留在最终的 CSS 中。这可以通过 safelist 参数来完成。

此参数有两种形式。

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

在这种形式下，safelist 是一个可以接受字符串或正则表达式的数组。

完整 形式如下：

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

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']
          },
          safelist: ['random', 'yep', 'button', /red$/],
          keyframes: true,
          fontFace: true
        },
        files: {
          'dist/app.css': ['src/css/app.css']
        }
      }
    }
  });