如何在命令行中单独使用 clean-css 压缩 CSS

作为前端开发者，我们在开发中经常需要压缩 CSS 来减小体积、提高网页加载速度。 clean-css 是 Node.js 生态中常用的 CSS 压缩工具，但很多人会遇到一个困惑： 在项目中可以用，在命令行却找不到命令 。我在实践中总结了几个关键点和解决方案。

1️⃣ 问题原因

通常，你会在项目里用下面方式安装 clean-css-cli ：

npm install --save-dev clean-css-cli

这种安装方式是 本地安装 ，可执行文件位于：

node_modules/.bin/cleancss

这意味着：

• 在 package.json 的 scripts 中可以直接用 cleancss
• 但在全局命令行直接执行 cleancss ，系统无法找到它

换句话说， 本地安装不会自动加到系统 PATH 。

2️⃣ 解决方案

方案 A：全局安装（最直接）

npm install -g clean-css-cli

然后在命令行就能直接：

cleancss -o style.min.css style.css

✅ 优点：简单直接，适合个人开发者使用 ❌ 缺点：全局安装不方便多人协作或 CI/CD

方案 B：使用 npx （推荐）

如果你不想全局安装，可以利用 npx 自动调用本地安装的可执行文件：

npx cleancss -o style.min.css style.css

✅ 优点：无需全局安装，适合团队项目或 CI/CD 流程 ✅ 兼容性好，保证所有开发者使用同一版本

方案 C：在 package.json 写 script（最佳实践）

在团队项目中，推荐把命令封装在 package.json 脚本里：

{
  "scripts": {
    "minify-css": "cleancss -o dist/style.min.css src/style.css"
  }
}

然后执行：

npm run minify-css

✅ 优点：可控性高，团队成员无需关心全局安装 ✅ 便于和构建流程（Webpack、Gulp 等）结合

3️⃣ 小结

• 本地安装 → 项目内部可用，需要 npx 或 script
• 全局安装 → 命令行可直接用，但不利于团队统一
• 最佳实践 → 本地安装 + npm script，保证可维护性和团队一致性

💡 开发者建议 ：

如果你希望在项目中自动压缩整个 CSS 文件夹，可以用 npx cleancss + 通配符或者写一个小脚本批量处理，这样每次构建就能一键生成压缩后的 CSS，非常适合现代前端项目。