跳到主要内容

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']
}
}
}
});