vue使用postcss_使用PostCSS进行优化和缩小

vue使用postcss

在上一教程中，您学习了如何使用PostCSS来帮助您的样式表更加跨浏览器兼容，尤其是处理因支持IE的旧版本而引起的问题。

在本教程中，我们将学习如何使用PostCSS来执行各种缩小和优化操作，从而使样式表更高效，加载更快。

您将学习如何：

• 即使您的某些样式表来自Bower组件或npm模块，也可以通过@import规则将多个样式表合并为一个，从而确保只需要一个http请求即可加载网站CSS。
• 将匹配的媒体查询合并为一个，使您可以在开发过程中在多个位置使用相同的媒体查询，但最终在最终样式表中仍然可以提高合并查询的效率。
• 使用cssnano包可以执行各种优化，从去除空白和注释到最小化某些类型的代码等等。

让我们开始吧！

设置您的项目

您需要做的第一件事是根据您的喜好将项目设置为使用Gulp或Grunt。 如果您还不喜欢其中一种，那么我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的，因此您应该发现使用起来更加简单。

您可以在之前的教程中了解如何为PostCSS设置Gulp或Grunt项目

• PostCSS快速入门指南：Gulp设置或
• PostCSS快速入门指南：Grunt设置

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件 ，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。 然后在终端或命令提示符指向文件夹的情况下，运行命令npm install 。

安装插件

在本教程中，我们将使用两个单独的插件以及一个插件包。 通过在项目文件夹中运行以下命令来安装它们：

npm install postcss-import css-mqpacker cssnano --save-dev

现在已经安装了插件，让我们继续将它们加载到您的项目中。

通过Gulp加载插件

如果您使用的是Gulp，请将这些变量添加到文件中已存在的变量下：

var atImport = require('postcss-import');
var mqpacker = require('css-mqpacker');
var cssnano = require('cssnano');

现在，将每个这些新变量名称添加到processors数组中：

var processors = [
		atImport,
		mqpacker,
		cssnano
	];

通过运行gulp css命令，然后检查项目的“目标”文件夹中是否已出现新的“ style.css”文件，来快速测试一切是否正常。

通过Grunt加载插件

如果您使用的是Grunt，请将嵌套在options对象下的processors对象更新为以下内容：

processors: [
          require('postcss-import')(),
          require('css-mqpacker')(),
          require('cssnano')()
        ]

通过运行grunt postcss命令，然后检查项目的“ dest”文件夹中是否出现了新的“ style.css”文件，来快速测试一切是否正常。

那已经安装和加载了所有插件，所以让我们继续学习如何使用它们进行最小化和优化。

使用@import内联/合并文件

与其单独加载多个样式表，不如将其组合成一个样式，效率更高。

例如，使用Normalize.css非常普遍，但是，如果在主样式表之前将其作为独立样式表加载，则它需要多个http请求，因此会减慢加载时间。

但是，如果使用Maxime Thirouin的postcss-import插件，则可以通过使用@import规则将Normalize.css组合到主样式表中，从而只使用一个http请求就可以提供相同CSS。

@import然后内联Normalize.css

让我们继续执行此操作，导入Normalize.css并将其内联到我们项目的样式表中。 首先从https://necolas.github.io/normalize.css/下载“ normalize.css”到项目的“ src”文件夹中。

在“ src / style.css”文件的顶部添加以下行：

@import 'normalize.css';

因为您已经安装了postcss-import，所以这就是您要做的。 它将看到@import规则，并自动将normalize.css文件中的代码内联到样式表中。

编译文件，当您查看“ dest / style.css”文件时，应在其中看到“ normalize.css”的全部内容：

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;.......

您可以使用相同的过程来组合所需的多个单独的样式表。 只要将@import行放在“ src / style.css”文件中，即可插入内联代码。

自动Bower组件和节点模块发现

该插件的一个非常有用的功能是它能够自动发现位于“ bower_components”或“ node_modules”文件夹中CSS文件的功能。

例如，与其像上面那样手动下载“ normalize.css”，不如直接在项目中运行命令bower install normalize.css --save 。 这将自动将最新的“ normalize.css”文件下载到“ bower_components / normalize.css”文件夹中。

注意 ：如果您的电脑上没有Bower设置，请在这里学习如何 。

现在，您可以在样式表的顶部使用以下行：

@import 'normalize.css/normalize.css';

postcss-import插件将在“ bower_components”文件夹中查找并找到“ normalize.css”，然后像上一个示例一样继续对其进行内联。

对于“ node_modules”文件夹中的任何样式表，可以遵循相同的过程，这意味着您可以使用Bower或npm来处理下载，依赖项管理和更新。 当使用这两种服务时，此插件为您提供了一种将第三方CSS文件组合到您自己的样式表中的简便方法。

利用@import内联的方式

以这种方式内联导入CSS文件不仅是组合来自不同来源（例如Bower组件）的文件的一种非常有效的方法，还使您可以选择将项目组织成多个单独的样式表。

例如，您可以创建一个文件来控制布局，并创建另一个文件来控制配色方案。 如果您想更改配色方案，则可以遵循以下过程：

1. 原始颜色样式表重复
2. 用新的颜色代码进行修改
3. 将新的颜色样式表导入项目
4. 编译以创建备用的彩色样式表

然后，您可以根据需要多次重复此过程，从而可以高效地为同一设计创建多个配色方案。

某些项目使用单独的样式表来提供多种颜色方案，但在此过程中，添加的http请求会降低速度。 通过这种方法，尽管在单个样式表中可能包含很大的自由度，但最终总是只收到一个http请求。

在以下网址了解有关postcss-import的更多信息： https ： //github.com/postcss/postcss-import

合并匹配的媒体查询

长岛恭 （Kyo Nagashima）的css-mqpacker插件将在您的样式表中找到匹配的媒体查询，并将它们组合为一个。 这样，您就可以按照自己的喜好来组织CSS，以开发样式表为准，并在需要时重复媒体查询，而不必担心生产样式表的效率降低。

让我们举一个用例类型的示例，在该用例中，您可能想重复媒体查询，例如，如果要分别组织设计的布局和视觉效果。 在实际的项目中，这可能意味着使用完全独立的文件，一个用于布局，一个用于视觉，但是为了简单起见，我们将在“ src / style.css”文件中完成所有这些操作。

我们将从一些布局代码开始。 默认情况下，我们将添加一个.column类，该类将使两个50%宽度的列并排放置。 然后，我们将使用媒体查询以较小的尺寸将它们堆叠在一起。 将此代码添加到样式表中：

/* LAYOUT */

.column {
    width: 50%;
	float: left;
}

@media (max-width: 50rem) {
	.column {
		width: 100%;
		float: none;
	}
}

接下来，我们将添加一些视觉效果以在我们的列周围设置灰色边框。 第一列将具有类.column_one ，第二列将具有类.column_two 。 我们将使用与布局相同的媒体查询，以更改对列应用边框的方式，具体取决于它们是并排放置还是彼此重叠放置。

也将此代码添加到样式表中：

/* VISUALS */

.column_one, .column_two {
    border: 0.0625rem solid #ccc;
}

.column_two {
	border-left: 0;
}

@media (max-width: 50rem) {
	.column_one, .column_two {
		border: 0.0625rem solid #ccc;
	}

	.column_two {
		border-top: 0;
	}
}

现在，重新编译“ src / style.css”文件，并查看生成的“ dest / style.css”内容。

如下面的代码所示，css-mqpacker插件已识别出两个匹配的媒体查询，并将它们组合为一个：

/* LAYOUT */

.column {
    width: 50%;
	float: left;
}

/* VISUALS */

.column_one, .column_two {
	border: 0.0625rem solid #ccc;
}

.column_two {
	border-left: 0;
}

@media (max-width: 50rem) {

	.column {
		width: 100%;
		float: none;
	}

	.column_one, .column_two {
		border: 0.0625rem solid #ccc;
	}

	.column_two {
		border-top: 0;
	}
}

注意 ：由于使用了cssn​​ano插件，以上代码将在“ dest / style.css”文件中最小化。 要查看unminified代码，暂时注释掉cssnano从Gulpfile或Gruntfile的processors阵列。

在https://github.com/hail2u/node-css-mqpacker上了解有关css-mqpacker的更多信息

cssnano插件包

对于全面的，多方面CSS优化，Ben Briggs的cssnano包是一个非常强大的选项，但是它几乎可以即插即用。 它汇集了大约25个插件，并且可以执行大量不同类型的优化。

在众多优化中，它可以：

• 删除空格和最终分号
• 删除评论
• 优化字体粗细
• 舍弃重复规则
• 优化calc()使用
• 缩小选择器
• 最小化长期属性
• 合并规则

我们将在您的项目中处理一些示例代码，这些示例代码将看到应用了所有上述优化。

将此代码添加到您的“ src / style.css”文件中：

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* This is an example of cssnano in action */
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

a {
	text-decoration: none;
	font-weight: bold;
}

p {
	font-weight: bold;
}

然后重新编译您的文件。

注意 ：您可能希望注释掉已有的任何代码，以便可以清楚地看到结果。

现在，在“ dest / style.css”文件中，您应该看到优化的代码：

.css_nano,.css_nano+p,[class*=css_nano]{margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}a{text-decoration:none}a,p{font-weight:700}

浏览上面项目符号列表中提到的优化列表，然后在编译之前和之后比较示例代码，以查看这些更改中的每一个如何发生：

• 空格，注释和最后的分号都消失了
• font-weight: normal和font-weight: bold分别转换为font-weight: 400和font-weight: 700
• 规则font-weight: normal;的第二个重复实例font-weight: normal; 已从.css_nano样式中删除
• calc()属性已减少为静态值
• 选择器.css_nano, .css_nano + p, [class*="css_nano"], .css_nano已缩小为.css_nano,.css_nano+p,[class*=css_nano]
• margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem;属性margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem; margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem; 已减少到margin:1rem 2.5rem 2rem 1.5rem;
• a和p样式已合并以共享它们的常用font-weight: 700; 设置

有关优化的完整列表，cssnano提供了以下内容： http ://cssnano.co/optimisations/

配置选项和禁用模块

cssnano软件包使用了几个独立的插件，您可能希望为其中的一些配置设置或完全禁用它们。

要禁用插件，请在您的选项中为cssnano传递其名称，并应用设置“ false”。 例如，如果您不想优化字体粗细，请在Gulpfile / Gruntfile中设置以下内容：

// In Gulpfile 'processors' array
cssnano({
    minifyFontWeight: false
})

// In Gruntfile 'processors' array
require('cssnano')({
    minifyFontWeight: false
})

您可以按照相同的方法为插件配置选项，先给插件指定名称，然后再设置其选项。

例如，您可以设置calc插件应使用的精度（小数位数）。 默认情况下calc( 100% / 2.76 )将给您36.23188% 。 但是，如果您想将该精度降低到两位小数，可以这样做：

// In Gulpfile 'processors' array
cssnano({
    calc: {precision: 2}
})

// In Gruntfile 'processors' array
require('cssnano')({
    calc: {precision: 2}
})

calc值现在将输出为36.23% 。

有关cssnano选项的更多信息，请访问： http ://cssnano.co/options

快速回顾

让我们简要介绍一下我们上面介绍的内容：

• postcss-import插件为您提供了内联样式表的有效方法。
• 它可以用于结合第三方样式表，包括通过自动发现“ bower_components”或“ npm_modules”文件夹中的样式表。
• 它可用于允许您将样式表拆分为多个部分，然后在以后重新组合它们。
• css-mqpacker插件允许您复制媒体查询，以便您可以按自己的喜好组织CSS，包括将它们分为单独的文件，然后将所有匹配的媒体查询合并到最终样式表中。
• cssnano包汇集了约25个不同的插件，使您可以即插即用地访问大量的缩小和优化功能。
• 可以将其配置为使用所需的任何包含的插件以及所需的选项。

下一步：使用PreCSS进行预处理

在下一个教程中，我们将通过一个名为PreCSS的出色插件包深入探讨使用PostCSS进行预处理。 该包可通过变量，混合，条件，扩展等方式立即访问Sass式语法和功能。

在下一个教程中见！

翻译自: https://webdesign.tutsplus.com/tutorials/using-postcss-for-minification-and-optimization--cms-24568

vue使用postcss