PurgeCSS

Grunt

安装

npm install grunt-purgecss --save-dev

安装插件后，可以使用以下 JavaScript 代码在 Gruntfile 中启用它

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

如果您正在使用 CSS 动画库（例如 animate.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']
        }
      }
    }
  });