Gulp-uncss 使用教程

Gulp-uncss 使用教程

gulp-uncssDEPRECATED. Remove unused CSS selectors.项目地址:https://gitcode.com/gh_mirrors/gu/gulp-uncss

1. 项目目录结构及介绍

当你克隆或下载 https://github.com/ben-eb/gulp-uncss.git 项目后，你可能会看到以下基本目录结构：

gulp-uncss/
│
├── gulpfile.js      # 主要的 Gulp 任务配置文件
└── package.json     # 项目依赖管理文件

• gulpfile.js: 包含了使用 Gulp 和 gulp-uncss 的任务脚本，用于从 HTML 文件中检测并移除未使用的 CSS 样式。
• package.json: 定义了项目依赖，包括 gulp 和 gulp-uncss 等库。

2. 项目启动文件介绍

主要的工作流程定义在 gulpfile.js 中，这里展示了如何配置和运行 Gulp 任务来利用 gulp-uncss 删除不必要的 CSS 规则。以下是 gulpfile.js 的核心部分：

var gulp = require('gulp');
var uncss = require('gulp-uncss');

gulp.task('uncss', function () {
    return gulp.src('src/css/origin.css')
        .pipe(uncss({
            html: ['src/origin.html']
        }))
        .pipe(gulp.dest('build/css/uncss'));
});

这个 uncss 任务做以下几件事：

1. 从 src/css/origin.css 加载原始 CSS 文件。
2. 使用 uncss 插件，指定 src/origin.html 作为分析 HTML，查找 CSS 使用情况。
3. 过滤掉未使用的 CSS 规则，生成新的干净的 CSS 文件。
4. 将结果保存到 build/css/uncss 目录下。

要执行此任务，只需在项目根目录下运行 gulp uncss。

3. 项目的配置文件介绍

在这个项目中，配置文件主要是 gulpfile.js 中的 uncss 任务参数。你可以按需修改以下几个配置项：

• gulp.src('src/css/origin.css'): 指定待处理的 CSS 输入路径。
• { html: ['src/origin.html'] }: 是一个对象，html 属性表示包含 CSS 引用的 HTML 页面列表，可以是相对路径或绝对路径，多个页面以数组形式给出。
• gulp.dest('build/css/uncss'): 指定处理后的 CSS 输出路径。

可以根据你的实际项目结构和需求调整这些配置。例如，如果你有多份 CSS 或 HTML，你需要相应地更新 src() 和 uncss() 方法中的路径。

gulp-uncssDEPRECATED. Remove unused CSS selectors.项目地址:https://gitcode.com/gh_mirrors/gu/gulp-uncss