#npm 包 purifycss 使用教程
简介
purifycss 是一个可以剔除未使用 CSS 代码的 npm 包，可以在构建后将未使用的 CSS 代码从生产文件中剔除，减小包大小，提高加载速度。本文将详细介绍 purifycss 的使用方法，包括安装、配置、参数介绍和示例代码。
安装
在项目中安装 purifycss，可以使用 npm 命令：
npm install purify-css
配置
方法一：命令行
在命令行中使用 purifycss，可以运行如下命令：
purifycss path/to/css/*.css path/to/js/*.js -o path/to/output.css
其中：
- path/to/css/.css: CSS 文件路径，可以是一个数组，例如：['path/to/css/.css', 'path/to/other/css/*.css']
- path/to/js/.js: JS 文件路径，可以是一个数组，例如：['path/to/js/.js', 'path/to/other/js/*.js']
- path/to/output.css: 输出的 CSS 文件路径
方法二：配置文件
在使用配置文件时，需要创建一个名为 purifycss.config.js 的文件，其中包含如下代码：
module.exports = {
css: ['path/to/css/*.css', 'path/to/other/css/*.css'],
js: ['path/to/js/*.js', 'path/to/other/js/*.js'],
output: 'path/to/output.css'
}其中：
- css: CSS 文件路径，可以是一个数组。
- js: JS 文件路径，可以是一个数组。
- output: 输出的 CSS 文件路径。
参数介绍
purifycss 提供了一系列参数控制分析行为，例如 whitelisted、rejected 和 minify。
whitelisted 用于设置白名单，即被允许的 CSS 选择器和属性。 rejected 属性可以用于设置黑名单，即应该从生成的 CSS 中删除的选择器和属性。 minify 用于将生成的 CSS 文件压缩。
示例代码：
-- -------------------- ---- -------
--- --------------- - -----------------------------
--- ---- - ----------------
--- ---- - ----------------
--- --------- - --- -----------------
-- ------- --- --------- -- ----- -- ---- --- ------ ----- ------ -- ---------
------ ------------------------------ ---------------
-- ---- -- --- --------- ----- ---- ------ ------
-- ---- -------- ----- ---------------------------------------------------------------------------------
---------------- ---------
-------------- -
---------- ---------
-
--结语
本文详细介绍了 purifycss 的使用方法和参数，希望对前端开发者有所帮助。若在使用中遇到问题，欢迎随时联系我。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64199