在前端开发中，有时不可避免地要引入样式库或框架，但这样带来的问题是，这些样式可能包含了我们项目中不需要的代码，大大增加了文件大小和加载时间。我们需要去除这些冗余的代码，而这正是 gulp-uncss 包可以解决的问题。
简介
gulp-uncss 是一个 Gulp 插件，可以帮助我们去除 CSS 样式中没有用到的部分。它基于 uncss 库实现，uncss 是一个 Node.js 库，可以通过 CSS 选择器分析 HTML 文件，找出没有被引用到的
CSS 样式，并去除这些未使用的样式。
安装
在使用 gulp-uncss 之前，需要确保你已经安装好了 Gulp。如果尚未安装，请先运行以下命令：
$ npm install gulp-cli -g $ npm install gulp -D
然后运行以下命令安装 gulp-uncss：
$ npm install gulp-uncss -D
使用
下面是一个基本的 gulpfile.js 文件，使用 gulp-uncss 去除 Bootstrap 样式中未使用的部分：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
---------------------- -------- -- -
------ -----------------------------
-------------
----- -------------- ------------- ---------------
---
-----------------------------
---上面代码中，gulp-uncss 的主要功能通过 gulp-uncss() 方法实现。该方法的参数是一个对象，包含了以下配置选项：
html：要分析的 HTML 文件的路径数组。options：传递给uncss库的选项对象。具体选项可以参考 uncss 库的文档。
示例
下面是一个完整的示例，演示了如何使用 gulp-uncss 去除 Bootstrap 样式中未使用的部分。
首先，在本地新建一个名为 gulp-uncss-demo 的空项目，并初始化 package.json 文件：
$ mkdir gulp-uncss-demo && cd gulp-uncss-demo $ npm init -y
然后，安装必要的依赖：
$ npm install gulp gulp-uncss browser-sync bootstrap jquery popper.js -D
其中，browser-sync 是一个实时预览的工具，bootstrap 是我们要去除未使用部分的目标样式库，jquery 和 popper.js 是 Bootstrap 中的其他依赖库。
在项目根目录下，新建一个名为 gulpfile.js 的文件，并输入以下代码：
-- -------------------- ---- -------
-- ------
----- ---- - ----------------
----- ----- - ----------------------
----- ----------- - ---------------------------------
-- ----
----- ----- - -
---- -
----- ---------
---- ------------
--
----- -
---- -----------
--
--
-- -------
------------------- -- -- -
------ -----------------------
-------------
----- -----------------
------- --
---
--------------------------------
----------------------------
---
-- ------
------------------ -- -- -
------------------
------- -
-------- ----
-
---
------------------------- -----------------------
--------------------------------------- --------------------
---
-- ----
-------------------- --------------------- ----------
上述代码中，‘styles’ 任务会去除所有未使用的 CSS 样式，而 ‘watch’ 任务则用于实时监控文件的变化。我们只需要在命令行中输入以下命令，即可启动本地预览服务器：
$ gulp
现在，我们可以在本地服务器上直接预览到去除未使用 CSS 样式后的页面了。
总结
在前端开发中，使用 npm 包 gulp-uncss 可以帮助我们高效地去除冗余的 CSS 样式，从而使我们的文件加载更快，提高用户体验。此外，在通过本文学习 gulp-uncss 的过程中，不仅可以掌握使用它的方法，还能进一步掌握 Gulp 中的任务管理的机制，对前端开发有着深刻的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74136