Gulp-PurifyCSS 使用指南

Gulp-PurifyCSS 使用指南

gulp-purifycssRemoved unused CSS with the gulp build tool项目地址:https://gitcode.com/gh_mirrors/gu/gulp-purifycss

1. 项目目录结构及介绍

Gulp-PurifyCSS 是一个用于清理无用 CSS 的 Gulp 插件，基于 PurifyCSS。下面展示的是该插件在默认情况下的基本目录结构及其简要说明：

gulp-purifycss/
├── README.md           # 项目的主要说明文档，包括安装、使用方法等。
├── LICENSE             # 许可证文件，说明了软件的使用许可条款，本项目采用 MIT 许可。
├── index.js            # 主入口文件，定义了 Gulp 插件的主要逻辑。
└── package.json        # 包管理配置文件，包含了项目的依赖信息、版本、作者等元数据。

可能还会有其他常见的开发文件如 .gitignore 和源代码文件夹等，但核心功能主要通过 index.js 实现，并且配置是通过调用该插件时传入参数来实现的，而不是通过独立的配置文件。

2. 项目的启动文件介绍

此项目本身不直接提供一个“启动文件”以供终端用户执行，而是作为一个 Gulp 任务使用的插件被集成到用户的 Gulp 构建流程中。要在你的项目中“启动”或使用这个插件，你需要在你的 Gulpfile 中引入它并配置相关任务，例如：

// 引入gulp和gulp-purifycss
var gulp = require('gulp');
var purify = require('gulp-purifycss');

// 定义一个CSS净化任务
gulp.task('purifycss', function() {
    return gulp.src('/public/app/example.css')
        .pipe(purify(['/public/app/**/*.js', '/public/**/*html']))
        .pipe(gulp.dest('/dist/'));
});

在上述示例中，Gulpfile.js 就是用户项目的“启动文件”，通过定义的任务来运行 gulp-purifycss。

3. 项目的配置文件介绍

Gulp-PurifyCSS 并没有一个单独的配置文件，它的配置是动态的，在使用时通过 Gulp 任务中的函数参数完成。配置过程通常涉及到以下几个方面：

• 源CSS文件路径：通过 gulp.src 指定，告诉插件从哪里读取原始CSS。
• 匹配文件列表：传递给 purify() 函数的第二个参数，用来指定哪些HTML或JS文件应被分析以确定实际被使用的CSS选择器。
• 输出目录：通过 gulp.dest 确定净化后的CSS存放位置。

因此，尽管没有传统意义上的配置文件，所有的配置都是在你的Gulp构建脚本（通常是Gulpfile.js）中进行的，通过对插件API的调用来进行定制化配置。

gulp-purifycssRemoved unused CSS with the gulp build tool项目地址:https://gitcode.com/gh_mirrors/gu/gulp-purifycss