PurifyCSS 使用指南

PurifyCSS 使用指南

purifycssRemove unused CSS. Also works with single-page apps.项目地址:https://gitcode.com/gh_mirrors/pu/purifycss

---

项目介绍

PurifyCSS 是一个由 Ilias Ismanalijev 开发的 JavaScript 库，致力于从你的样式表中移除未使用的 CSS 规则。它通过扫描你的 HTML 和 JavaScript 源码来识别实际被用到的选择器，并清理掉 CSS 文件中的冗余代码。这对于优化网站性能尤为重要，尤其是当你在项目中采用了如 Bootstrap 这样的大型 CSS 框架，但实际仅使用了其中一小部分规则时。PurifyCSS 可以作为构建流程的一部分，集成于 Grunt、Gulp 或 Webpack 等工具中，同时也提供在线工具以方便不同开发环境的用户。

---

项目快速启动

要快速开始使用 PurifyCSS，首先确保你的开发环境中已安装 Node.js。然后，可以通过npm安装PurifyCSS：

npm install --save-dev purifycss

接下来，在你的构建脚本中引入并使用它。以下是一个简单的示例，展示如何将PurifyCSS应用于已编写的CSS和源代码文件：

const purify = require('purifycss');
const fs = require('fs');

let css = fs.readFileSync('path/to/your/css.css', 'utf8');
let html = fs.readFileSync('path/to/your/index.html', 'utf8');

// 如果你的JavaScript文件中有动态生成的CSS类名，也应当读取它们
let jsFiles = ['path/to/your/script.js'];

purify([html].concat(jsFiles), css)
  .then(cleanedCss => {
    fs.writeFileSync('path/to/output/clean.css', cleanedCss);
    console.log("CSS 清理完成");
  })
  .catch(err => console.error(err));

---

应用案例和最佳实践

应用案例

在WordPress网站上优化CSS是PurifyCSS的一个典型应用场景。尽管不直接支持插件形式，但你可以手动运行PurifyCSS来处理主题CSS，从而减少加载时间，提升用户体验。

最佳实践

• 在生产环境下运行PurifyCSS，避免在开发阶段影响调试。
• 对于单页面应用（SPA），确保遍历所有路由以覆盖所有可能状态下的样式需求。
• 结合CSS预处理器和构建工具使用，以最大化自动化程度。
• 定期重复此过程，尤其是在更新前端框架或切换主题之后。

---

典型生态项目

虽然PurifyCSS本身是一个独立库，但它可以无缝融入现代前端的多种生态系统，如配合Webpack、Gulp等构建工具进行自动化的CSS精简。此外，由于其强大的功能，一些定制化工具和服务也应运而生，例如“PurifyCSS Online”，提供了直接上传网页URL或HTML/CSS代码即可实现CSS瘦身的服务，极大地简化了对不熟悉命令行操作用户的友好性。

---

以上即为基于PurifyCSS的简明使用教程，遵循这些步骤，你将能够有效管理和优化你的CSS资源，提高网站性能。

purifycssRemove unused CSS. Also works with single-page apps.项目地址:https://gitcode.com/gh_mirrors/pu/purifycss