UnCSS-Online 使用教程

UnCSS-Online 使用教程

UnCSS-OnlineSimply UnCSS your styles online!项目地址:https://gitcode.com/gh_mirrors/un/UnCSS-Online

项目介绍

UnCSS-Online 是一个基于 Uncss 的在线工具，它允许开发者去除 CSS 中未被 HTML 文档使用的规则。这个工具特别适用于测试环境或一次性使用场景，帮助优化前端资源，减少页面加载时间。通过智能分析 HTML 和执行 JavaScript 来确定实际被使用的样式，从而精简 CSS 文件。

项目快速启动

要迅速开始使用 UnCSS-Online，您无需本地安装任何软件。只需访问其在线服务器 https://uncss-online.com/。如果您想通过API或者在Node.js环境中集成 Uncss 功能，可以通过以下步骤：

在线使用

1. 访问 UnCSS-Online。
2. 将您的 HTML 文件内容粘贴到指定区域，或输入包含 HTML 文件的网址。
3. 添加一个或多个 CSS 文件的URL 或本地路径，用于分析哪些样式被实际使用。
4. 点击“Start”按钮开始处理。
5. 处理完成后，您将获得一份精简后的 CSS 代码。

Node.js 环境

首先，确保已安装 Node.js，然后执行以下命令来安装 uncss:

npm install -g uncss

随后，您可以使用简单的命令行处理文件：

uncss input.html output.css

或者，在脚本中这样使用：

const uncss = require('uncss');
const fs = require('fs');

// 假设我们有HTML和CSS文件的内容
const htmlContent = fs.readFileSync('index.html', 'utf8');
const cssFiles = ['style.css'];

uncss(htmlContent, cssFiles, function(error, cleanedCss) {
    if(error) {
        console.error(error);
    } else {
        fs.writeFileSync('optimized.css', cleanedCss);
        console.log('CSS optimization completed.');
    }
});

应用案例和最佳实践

1. 前端构建流程：在自动化构建过程中整合 Uncss，确保生产环境中的 CSS 最小化且仅包含必要样式。
2. 原型开发：快速清理快速搭建的原型项目中的无用样式，提高原型的加载速度。
3. 主题定制：对于支持多皮肤的应用，可以针对每种皮肤分别运行 Uncss，确保风格文件精准匹配页面需求。

最佳实践：

• 在执行 Uncss 之前，确保所有动态生成的类名已被正确标记以避免意外移除。
• 结合使用自动化工具如 Grunt, Gulp 或 Webpack 插件，实现 CI/CD 流程中的自动优化。
• 对于复杂的交互页面，可能需要细致调整忽略列表(ignore)，确保JavaScript在特定事件触发后添加的样式不被误删。

典型生态项目

• Grunt 插件: grunt-uncss

  • 使用 Grunt 进行构建的任务自动化时，可以集成该插件进行 CSS 精简。

• Gulp 插件: gulp-uncss

  • 在 Gulp 构建流程中同样可以轻松集成，适合基于 Gulp 的工作流。

• Broccoli 插件: broccoli-uncss

  • 针对使用 Broccoli 的项目，提供了相似的 CSS 优化能力。

这些生态项目使得在不同的构建系统中使用 UnCSS 成为了可能，大大扩展了其适用范围和便利性。

---

以上就是关于 UnCSS-Online 的基本使用指南，无论是线上即时优化还是集成到您的开发流程中，都能有效帮助您管理并减小 CSS 的体积，提升网站性能。

UnCSS-OnlineSimply UnCSS your styles online!项目地址:https://gitcode.com/gh_mirrors/un/UnCSS-Online