在本教程中，我将向您展示如何使用Grunt和PurifyCSS轻松创建超轻量级的样式表。 我们将安装它，然后学习如何在使用Grunt和不使用Grunt的情况下运行它，以提供更多高性能的样式。
观看截屏
PurifyCSS是一个JavaScript工具，可解析您的标记文件（HTML，PHP甚至JavaScript），然后将它们与您使用的任何CSS交叉引用。 CSS中所有未使用的选择器都将被删除，仅留下您实际需要的样式。
安装
要安装PurifyCSS，您可以直接从GitHub上获取存储库，也可以通过npm进行安装（有关如何通过Kezz的本教程进行操作的更多详细信息）。
我们的演示
我们将用来演示PurifyCSS的文件是完整的Bootstrap样式表和index.html。 您可以从源存储库中获取它们。 index.html文件非常简单； 只有一个英雄区，其中包含一些按钮，表单元素和Bootstrap网格； 我们当然不需要整个Bootstrap样式库。
运行PurifyCSS
要在此样式表上运行PurifyCSS，请转至命令行提示符，导航至项目文件夹并使用以下命令运行命令：
-
purifycss 命令开始 - 将要纯化的源样式表
- 目标标记文件，在本例中为index.html
- 一个可选参数
--min 如果我们希望--min 生成CSS - 可选参数
--out 之后可以指定保存结果文件的位置 - 可选参数
--info 如果我们希望将过程记录到终端 - 以及可选参数
--rejected ，当包含时，记录所有已从源样式表拒绝的选择器
我们的最终命令如下所示：
1 | purifycss css/bootstrap-full.css index.html --min --out css/bootstrap-purify.css --info --rejected |
结果
源样式表已被修剪超过100Kb，干得好！
与Purunt一起使用PurifyCSS
为了使我们的流程更进一步自动化，我们可以使用像Grunt这样的任务运行器。 回到我们的起点，我们需要将package.json添加到我们的项目中。 从我们的文件夹中运行npm init将引导我们完成package.json的创建过程，本质上输出具有以下详细信息的文件：
1 2 3 4 5 6 7 8 9 10 11 | { "name": "purifycss", "version": "1.0.0", "description": "A file for testing Grunt PurifyCSS", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "Adi Purdila", "license": "ISC", } |
然后，如果还没有安装，则需要安装Grunt：
1 | npm install grunt --save |
完成此操作后，您将看到一个“ node_modules”文件夹已添加到您的项目中。
安装Grunt插件
接下来，我们需要为PurifyCSS安装Grunt插件 。
1 | npm install grunt-purifycss --save |
创建Gruntfile
现在我们需要创建一个名为gruntfile.js的文件。 查看源文件以查看此文件中包含的内容，但特别有趣的是Grunt任务本身：
1 2 3 4 5 6 7 | purifycss: { target: { src: ['*.html', 'js/*.js'], css: ['css/bootstrap-full.css'], dest: 'css/bootstrap-grunt.css' } } |
在上一个练习中，您应该熟悉目标对象中的选项，并且设置了这些参数后，文件就可以使用了。
要运行Grunt，请在终端中输入：
1 | grunt purifycss |
结论
我们完成了！ 我们研究了使用PurifyCSS清理样式表的两种不同方法。 别忘了：让浏览器以千字节甚至没有使用的样式加载毫无意义， 性能至关重要！
翻译自: https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726