grunt环境搭建及使用_使用PurifyCSS和Grunt删除不必要CSS-CSDN博客

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，请在终端中输入：