如何使用CSS-Purge移除重复代码且不丢失注释与格式？

刚好之前做项目时研究过这个需求，CSS-Purge其实有很灵活的配置项来实现保留注释和原有格式的同时清理冗余CSS，下面给你详细拆解：

默认情况下，CSS-Purge会自动移除所有注释并把代码压缩成一行，所以我们需要调整两个关键配置参数来覆盖默认行为：

1. 保留所有注释 #

使用preserveComments参数，设置为true即可保留CSS中的所有注释——不管是单行的// 注释还是多行的/* 多行注释 */都能完整保留。如果之后你只想保留带!的优先级注释（比如/*! 这个不会被移除 */），可以把值改成"important"，但针对你的需求，直接用true就够了。

2. 保留原有格式 #

用format参数控制输出的代码格式：

• 设置为"expanded"：会尽可能还原原文件的换行、缩进等排版，最接近你原始代码的格式
• 设置为"compact"：会稍微规整代码但不会压缩成一行，适合想要整洁但不紧凑的输出

命令行（CLI）方式 #

如果直接用CSS-Purge的命令行工具，执行这条命令即可：

csspurge your-input.css --preserveComments true --format expanded -o cleaned-output.css

解释一下参数：

• your-input.css：你的原始CSS文件路径
• --preserveComments true：开启保留所有注释
• --format expanded：保留扩展格式
• -o cleaned-output.css：指定输出文件路径

Node.js API方式 #

如果在项目中通过代码调用CSS-Purge，参考这段示例：

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

// 配置参数
const purgeOptions = {
  preserveComments: true,
  format: 'expanded',
  // 可选：指定检测的HTML/JS文件（用来判断哪些CSS选择器被实际使用）
  content: ['./index.html', './src/**/*.js']
};

// 清理单个文件并写入输出
csspurge.purgeFile('./styles/main.css', purgeOptions)
  .then(cleanedCSS => {
    fs.writeFileSync('./styles/cleaned-main.css', cleanedCSS);
    console.log('CSS清理完成，已保留注释和格式');
  })
  .catch(err => console.error('清理失败:', err));

• 注释保留不会影响CSS-Purge的核心功能：它依然会准确移除未被使用的选择器，只是保留你写的注释内容
• 如果你的原始CSS有非常不规则的缩进，expanded模式会做轻微的规整，但不会破坏整体排版逻辑
• 如果你使用的是CSS-Purge的GUI版本，在设置面板里找到「Comments」和「Format」选项，对应勾选/选择即可

内容的提问来源于stack exchange，提问作者James Pyle NewYears1978