前言
在前端开发中，我们经常会遇到需要进行 CSS 前处理的情况，其中一个流行的选择是使用 Sass 或者 Less。然而，有时候我们需要更进一步来优化 CSS，这时候就可以使用 pleeease 这个 npm 包了。
在这篇文章中，我们将介绍如何使用 pleeease 这个 npm 包来做 CSS 后处理，以生成更高效的 CSS。本文假定你已经知道如何在项目中使用 npm 包。
安装 pleeease
安装 pleeease 只需要一条简单的命令：
--- ------- -- ------------
这条命令将全局安装 pleeease，以便我们在命令行中使用。
使用 pleeease
在命令行中，我们可以使用以下命令来调用 pleeease：
-------- --------- ---------- ------------ --
这会把 input.css 进行处理，并把结果输出到 output.css 中。
除了 --optimizers on，pleeease 还有很多其他的选项，让我们详细看一下。
选项一：autoprefixer
在编写 CSS 代码时，我们通常会手动编写浏览器前缀以支持不同的浏览器。然而这种方法非常的麻烦，而且容易出错。这时候，autoprefixer 就能帮助我们自动添加浏览器前缀了。
在 pleeease 中，我们可以使用 autoprefixer 这个优化器来实现。只需要在命令行中输入：
-------- --------- ---------- -------------- -- --------- ------ - ---------- --
这会自动为以下浏览器添加前缀：last 4 versions。
当然，我们也可以指定多个浏览器：
-------- --------- ---------- -------------- -- --------- ------ - ---------- --- --- --
这会自动为以下浏览器添加前缀：last 2 versions 和 ie 8。
autoprefixer 的优势在于它可以自动为你添加最新的 CSS 属性前缀，而且不需要你手动去添加。
选项二：rem
在响应式设计中，rem 单位是一个非常有用的度量单位。用它可以让网页元素相对于根元素调整大小，以响应不同屏幕大小。
在 pleeease 中，我们可以使用 rem 这个优化器来实现。只需要在命令行中输入：
-------- --------- ---------- ----- -- ------------ ------ --
这绑定了根元素的 font-size 属性到 16px 上。其它元素的 rem 单位会相对应地调整大小。
rem 优化器显然非常方便，而且能够省下很多的代码。
选项三：minifiers
在生产环境中，我们通常会使用 minifier 技术来压缩我们的 CSS 和 JavaScript 代码。这可以节约带宽，加快加载速度。
在 pleeease 中，我们可以使用 minifiers 这个优化器来实现。只需要在命令行中输入：
-------- --------- ---------- ----------- -- -------------------- ---- --
这将删除所有的 CSS 注释。
当然，我们也可以压缩代码：
-------- --------- ---------- ----------- -- --------- ---- --
这将压缩 CSS 代码，并去除不必要的空格和换行符。
上面的两个选项都是常用的 minifiers 选项，它们可以有效地压缩你的 CSS 代码。
示例代码
以下是一个完整的 pleeease 示例代码：
-- --------- --
---- -
---------- -------
------------------- --- ----- ------------
----------- --- ----- ------------
-
---- -
---------- ------
------ -----
----------------- --------
-------- ----- -----
-------------- ------
-
-- -------- --
-------- --------- ---------- -------------- -- --------- ------ - ---------- -- ----- -- ------------ ------ -- ----------- -- -------------------- ----- --------- ---- --
-- ---------- --
---- -
---------- -----
------------------- --- ----- ------------
----------- --- ----- ------------
-
---- -
---------- -----
------ -----
----------------- --------
-------- --- -----
-------------- ----
-结论
pleeease 是一个功能丰富的 npm 包，可以大幅度地减少我们 CSS 代码的大小，加快加载速度。在本文中，我们介绍了几个常用的 pleeease 选项，来帮助你更好地理解这个工具的用法。
希望你能够在你的 CSS 项目中使用 pleeease 并受到它的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57241