Broccoli-pleeease 是一个用于自动化样式表优化的 npm 包。在前端开发中，样式表的优化至关重要，尤其是在面临多变动态的网页设计之时，更需要高效的样式表管理及优化。Broccoli-pleeease 依赖了 Pleeease 插件，可以自动帮助你实现样式表的合并、压缩、前缀添加、变量替换等等优化，更重要的是，使用 broccoli-pleeease 可以高度的自我定制和配置化。下面给出一份 broccoli-pleeease 的使用教程，以方便大家更好的使用它，提升自身的前端知识和技能。
一、安装 broccoli-pleeease
Broccoli-pleeease 是一个基于 Node.js 环境的 npm 包，所以安装 broccoli-pleeease 前需要先安装 Node.js。现在我们假设你已经安装了 Node.js，可以在命令行终端运行以下代码进行 broccoli-pleeease 的安装：
npm install broccoli-pleeease --save-dev
二、使用 broccoli-pleeease
Broccoli-pleeease 的使用非常简单，仅需要在根目录新建一个 Brocfile.js 文件，在其中编写打包配置信息。例如我们需要对项目中的所有 CSS 文件进行优化，可以通过以下方式来实现：
-- -------------------- ---- -------
-- -- ----------------- -
--- -------- - -----------------------------
-- -----
--- -------- - -------------
-- ------
--- --------- - ---------------
-- -- ----------------- ----
--- --------- - ------------------ -
----- -----
------------- ------------ ------ - ------------
--------- ----
---
-- --------
-------------- - ----------上述配置文件定义如下：
- 定义了源目录为 'app/styles'，也就是将会被加工的源 CSS 文件所在的路径；
- 定义了打包目录为 'build/styles'，也就是加工后的 CSS 文件存放的路径；
- 使用了 pleeease 优化器，其中 sass 属性代表为源文件使用 sass 处理器，也就是对于 scss 文件可以直接进行编译；autoprefixer 属性用于自动添加浏览器前缀，这里添加的前缀为最近的两个版本；minifier 属性代表编译后最小化 CSS 进行优化。
三、自定义 broccoli-pleeease 的优化配置
在以上示例中，我们使用了一套默认的 pleeease 优化配置；如果你已经对 pleeease 有很深入的了解，并且需要定制一套符合自己项目的优化方案，这时候就需要自定义优化配置了。Broccoli-pleeease 提供了一些自定义的方法，可以让你自由定制优化的配置方法。
添加前缀（prefixes）
添加前缀是前端开发中不可避免的事情，你可以通过修改 autoprefixer 属性来添加自己想要的浏览器前缀。例如：
-- -------------------- ---- -------
--- -------- - -------------
--- --------- - ---------------
--- --------------- - -
------------- -
--------- -
----- - ----------
-- ----
--- --
--
-------- -----
-
--
--- ------------ - ------------------ -----------------
-------------- - -------------上述代码中，browsers 属性定义了要添加的前缀浏览器及版本号，cascade 属性定义了是否进行样式修饰。
压缩 css（minifier）
将多个 CSS 文件压缩成单个文件，是高效样式表优化的重要部分。Broccoli-pleeease 集成了 CSSO 来为你免费提供一套高效的压缩工具，你可以通过 minifier 属性来进行开启及自定义配置。例如：
-- -------------------- ---- -------
--- -------- - -------------
--- --------- - ---------------
--- --------------- - -
--------- -
------------------ ----
-
--
--- ------------ - ------------------ -----------------
-------------- - -------------上述代码中，minifier 属性代表使用 CSSO 进行 CSS 压缩；removeAllComments 属性定义是否去掉 CSS 文件中所有的注释。
使用 Sass（sass）
对于喜欢使用 SCSS 或其他 preprocessor 的开发者来说，可以通过设置 sass 为 true 来进行 SCSS 处理。例如：
-- -------------------- ---- ------- --- -------- - ------------- --- --------- - --------------- --- --------------- - - ----- ---- -- --- ------------ - ------------------ ----------------- -------------- - -------------
上述代码中，sass 属性代表允许使用 SCSS 进行预处理。
结语
至此，我们已经了解了如何快速便捷地使用 Broccoli-pleeease 进行前端样式表优化，包括安装、基础使用以及自定义配置。在日常开发中，样式表的管理优化是不可避免的，可以合理利用 Broccoli-pleeease 进行快速化、高效化的编程实践，来更好的对项目进行管理，提升团队和自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde508c