grunt环境搭建及使用
在本教程中,我将向您展示如何使用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
,当包含时,将记录所有已从源样式表拒绝的选择器
我们的最终命令如下所示:
purifycss css/bootstrap-full.css index.html --min --out css/bootstrap-purify.css --info --rejected
结果
源样式表已被修剪超过100Kb,干得好!
与Grunt一起使用PurifyCSS
为了使我们的流程进一步自动化,我们可以使用像Grunt这样的任务运行器。 回到我们的起点,我们需要将package.json添加到我们的项目中。 从我们的文件夹中运行npm init将引导我们完成package.json的创建过程,本质上输出具有以下详细信息的文件:
{
"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:
npm install grunt --save
完成此操作后,您将看到一个“ node_modules”文件夹已添加到您的项目中。
安装Grunt插件
接下来,我们需要为PurifyCSS安装Grunt插件 。
npm install grunt-purifycss --save
创建Gruntfile
现在我们需要创建一个名为gruntfile.js的文件。 查看源文件以查看文件中包含的内容,但特别有趣的是Grunt任务本身:
purifycss: {
target: {
src: ['*.html', 'js/*.js'],
css: ['css/bootstrap-full.css'],
dest: 'css/bootstrap-grunt.css'
}
}
在上一个练习中,您应该熟悉目标对象中的选项,并且设置了这些参数后,我们的文件就可以使用了。
要运行Grunt,请在终端中输入:
grunt purifycss
结论
我们完成了! 我们研究了使用PurifyCSS清理样式表的两种不同方法。 别忘了:让浏览器加载甚至不使用的千字节样式就没有意义, 性能很重要!
翻译自: https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726
grunt环境搭建及使用