UnCSS 使用教程

1. 项目介绍

UnCSS 是一个用于从样式表中移除未使用 CSS 的工具。它能够跨多个文件工作，并支持 JavaScript 注入的 CSS。UnCSS 通过以下步骤来移除未使用的样式规则：

1. 加载 HTML 文件并通过 jsdom 执行 JavaScript。
2. 解析所有样式表。
3. 使用 document.querySelector 过滤掉未在 HTML 文件中找到的选择器。
4. 将剩余的规则转换回 CSS。

UnCSS 特别适用于清理大型项目中的 CSS 文件，减少文件大小，提高页面加载速度。

2. 项目快速启动

安装

首先，你需要安装 UnCSS。你可以通过 npm 全局安装：

npm install -g uncss

使用

UnCSS 可以通过命令行或 Node.js 脚本使用。以下是一些基本的使用示例：

命令行使用

uncss https://example.com > output.css

Node.js 使用

const uncss = require('uncss');

const files = ['index.html', 'about.html'];
const options = {
    ignore: ['#added_at_runtime', /test\-[0-9]+/],
    media: ['(min-width: 700px) handheld and (orientation: landscape)'],
    raw: 'h1 { color: green }',
    stylesheets: ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
    ignoreSheets: [/fonts.googleapis/],
    timeout: 1000,
    htmlroot: 'public',
    report: false
};

uncss(files, options, function (error, output) {
    console.log(output);
});

3. 应用案例和最佳实践

应用案例

1. 清理大型网站的 CSS：对于拥有大量页面和复杂样式的大型网站，UnCSS 可以帮助清理未使用的 CSS，减少文件大小，提高页面加载速度。
2. 优化静态网站生成器：在使用静态网站生成器（如 Jekyll、Hugo）时，UnCSS 可以帮助优化生成的 CSS 文件，确保只有实际使用的样式被包含。

最佳实践

1. 定期清理：建议定期运行 UnCSS 来清理项目中的 CSS 文件，特别是在项目迭代过程中，确保未使用的样式不会累积。
2. 结合构建工具：将 UnCSS 集成到你的构建流程中，例如使用 Grunt、Gulp 或 Webpack，确保每次构建时都能自动清理 CSS。

4. 典型生态项目

1. Grunt-UnCSS：一个 Grunt 插件，允许你在 Grunt 构建流程中使用 UnCSS。
2. Gulp-UnCSS：一个 Gulp 插件，允许你在 Gulp 构建流程中使用 UnCSS。
3. Broccoli-UnCSS：一个 Broccoli 插件，允许你在 Broccoli 构建流程中使用 UnCSS。

这些工具可以帮助你更方便地将 UnCSS 集成到现有的前端构建流程中，自动化清理未使用的 CSS。