Grunt
安装
npm install grunt-purgecss --save-dev
插件安装完成后，可以在你的 Gruntfile 中通过以下 JavaScript 代码启用：
grunt.loadNpmTasks('grunt-purgecss');
"purgecss" 任务
概述
在项目的 Gruntfile 中，在传递给 grunt.initConfig() 的数据对象中添加一个名为 purgecss 的部分。
grunt.initConfig({
// 要运行（然后测试）的配置
purgecss: {
my_target: {
options: {
content: ['./src/**/*.html']
},
files: {
'dist/app.css': ['src/css/app.css']
}
}
}
});
选项
所有 PurgeCSS 的选项都可以与插件一起使用。 下面是主要可用选项。完整列表请访问 Purgecss 文档网站。
options.content
类型：string | Object
你可以指定 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({
// 要运行（然后测试）的配置
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']
}
}
}
});