简介
在前端开发中，我们经常需要对 CSS 文件进行优化，去除其中不必要的代码和样式，以减小文件大小和提高页面加载速度。这时，gulp-purify-css 就是一个非常实用的工具。
gulp-purify-css 是一个基于 gulp 的 npm 包，用于去除 CSS 文件中未使用的代码和样式。该工具采用了前端性能优化的经典技术：基于静态分析的 CSS Tree Shaking。
在本文中，我们将介绍如何使用 gulp-purify-css 进行 CSS 文件的优化。我们将首先介绍该工具的安装和使用方法，然后通过示例代码详细说明如何使用 gulp-purify-css 进行 CSS 文件的优化和打包。
安装和使用
安装
要使用 gulp-purify-css，你需要先安装 Node.js 和 gulp。如果你还没有安装，可以前往 Node.js 官网 (https://nodejs.org) 下载和安装 Node.js。
安装完成 Node.js 和 gulp 后，就可以安装 gulp-purify-css 了。在命令行中，进入项目根目录，并输入以下命令：
npm install gulp-purify-css --save-dev
这样，gulp-purify-css 就被安装到了你的项目中。
使用
在项目中使用 gulp-purify-css，你需要编写 gulpfile.js，配置 gulp 的任务。以下是一个简单的 gulpfile.js 配置文件：
const gulp = require('gulp');
const purifycss = require('gulp-purify-css');
gulp.task('purifycss', function () {
return gulp.src('src/css/**/*.css')
.pipe(purifycss(['src/js/**/*.js', 'src/*.html']))
.pipe(gulp.dest('dist/css'));
});上述代码定义了一个名为 purifycss 的 gulp 任务。该任务会将 src/css 目录下所有的 CSS 文件进行优化，并保存到 dist/css 目录中。
在这段代码中，我们通过 gulp.src 方法指定需要优化的 CSS 文件，然后通过 gulp-purify-css 的 pipe 方法，对这些文件进行优化。
purifycss 方法接受一个数组作为参数，该数组用于指定需要进行静态分析的 JavaScript 文件和 HTML 文件。gulp-purify-css 会根据这些文件的引用关系，去除 CSS 文件中未使用的代码和样式。
示例
为了更好地说明 gulp-purify-css 的使用方法，我们将通过一组示例代码详细介绍如何使用该工具进行 CSS 文件的优化和打包。
示例 1：基本配置
在这个示例中，我们将介绍如何使用 gulp-purify-css 进行基本的 CSS 文件优化。下面是一个简单的项目结构：
project ├── src │ ├── css │ │ └── style.css │ ├── js │ │ └── main.js │ └── index.html └── gulpfile.js
在这个项目中，我们的任务是对 src/css/style.css 文件进行优化，并将优化后的文件保存到 dist/css 目录中。
在项目根目录中新建一个 gulpfile.js 文件。该文件的内容如下：
const gulp = require('gulp');
const purifycss = require('gulp-purify-css');
gulp.task('purifycss', function () {
return gulp.src('src/css/**/*.css')
.pipe(purifycss(['src/js/**/*.js', 'src/*.html']))
.pipe(gulp.dest('dist/css'));
});在上述代码中，我们定义了一个名为 purifycss 的 gulp 任务。该任务会将 src/css 目录下所有的 CSS 文件进行优化，并保存到 dist/css 目录中。在 purifycss 方法中，我们传递了两个参数，用于指定需要进行静态分析的 JavaScript 文件和 HTML 文件。
完成上述代码的编写后，在命令行中进入项目根目录，运行以下命令：
gulp purifycss
gulp 将会对 CSS 文件进行优化，并将优化后的文件保存到 dist/css 目录中。
示例 2：自定义文件名
在上述示例中，gulp-purify-css 生成的 CSS 文件名称与源文件名称相同。如果希望自定义优化后的文件名称，可以手动指定 gulp.dest 的参数。下面是一个示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ---------------------------
---------------------- -------- -- -
------ ----------------------------
---------------------------------- ---------------
------------------------ ------ -
------ ----------- - ------------- - -----------
----
---在上述代码中，我们通过 gulp.dest 方法的回调函数，手动指定了生成的文件名，并将生成的文件保存到 dist/css 目录中。
示例 3：多个路径
在一些项目中，我们可能需要对多个 CSS 目录进行优化。下面是一个示例代码：
const gulp = require('gulp');
const purifycss = require('gulp-purify-css');
gulp.task('purifycss', function () {
return gulp.src(['src/css/**/*.css', 'src/lib/**/*.css'])
.pipe(purifycss(['src/js/**/*.js', 'src/*.html']))
.pipe(gulp.dest('dist/css'));
});在上述代码中，我们通过使用数组的方式，将多个 CSS 目录进行合并，并使用相同的配置进行优化。
总结
gulp-purify-css 是一个非常实用的工具，它能够帮助我们对 CSS 文件进行优化，去除未使用的代码和样式。在本文中，我们介绍了如何安装和使用 gulp-purify-css，以及使用示例代码详细说明了该工具的使用方法和配置技巧。如果你正在进行前端开发，并希望对 CSS 文件进行优化，那么 gulp-purify-css 就是一个不可错过的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f9d81e8991b448dcf21