如何使用CleanCSS安全压缩生产CSS？-css教程-PHP中文网

不能直接用 cleanCSS().minify() 压缩生产环境 CSS——它会静默丢弃 @import、破坏 sourcemap、跳过 autoprefixer，导致样式错乱或无法调试；必须通过 PostCSS 链式处理（postcss-import + autoprefixer）再交由 cleanCSS 压缩。

如何使用cleancss安全压缩生产css？

直接用 cleanCSS().minify() 压缩生产环境 CSS 是危险的——它会 silently 丢掉 @import、破坏 sourcemap、跳过 autoprefixer，最终线上样式错乱或无法调试。

为什么不能直接调用 clean-css API 压缩多文件？

原生 cleanCSS().minify() 只处理传入的字符串内容，完全不解析 CSS 语法结构。这意味着：

@import 'reset.css'; 这类语句会被原样保留，但 reset.css 根本没加载进来，压缩后只剩空壳
如果传入的是多个文件拼接的字符串（比如用 fs.readFileSync 手动合并），路径相对关系丢失，url(./img/icon.png) 全部 404
没有 sourceMap 支持，报错时浏览器里看到的是压缩后的一整行，定位不到原始 .scss 行号

必须用 PostCSS + postcss-import 提前内联依赖

要让 @import 生效，必须在 clean-css 之前完成依赖解析和内联。关键点是：

安装：npm install --save-dev postcss postcss-import gulp-postcss
在 gulpfile.js 中，postcss([require('postcss-import')]) 必须排在 cleanCSS() 前面
若 @import 路径含上层目录（如 @import '../vars.css';），必须显式传入 resolve 函数：{ resolve: (id, from) => path.resolve(path.dirname(from), id) }
别依赖默认解析逻辑——它只以入口文件所在目录为根，跨目录 @import 几乎必挂

sourcemap 三步缺一不可

gulp-sourcemaps 和 cleanCSS({ sourceMap: true }) 不是开关一开就自动联动。顺序和参数都严格：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

第一步：.pipe(gulpSourcemaps.init())
第二步：.pipe(cleanCSS({ sourceMap: true })) —— sourceMap: true 不能省，否则生成空 map
第三步：.pipe(gulpSourcemaps.write('./')) —— 路径必须匹配你后续 rev 或 CDN 的资源引用方式
漏掉任意一步，或者把 write() 放在 cleanCSS() 前面，结果都是 Cannot read property 'sources' of null

autoprefixer 必须在 cleanCSS 之前运行

clean-css 输出的是单行无缩进 CSS，而 autoprefixer 需要完整 AST 结构才能正确处理嵌套规则（如 @media 块里的 gap）、识别新特性（aspect-ratio）、注入前缀。如果顺序颠倒：

autoprefixer 解析失败，报 Unclosed bracket 或 Unexpected token
display: flex 可能被压缩成 display:flex 后再交给 autoprefixer，它已无法识别上下文，IE 兼容性直接崩
推荐链路：postcss([postcssImport, autoprefixer]) → cleanCSS() → rename({ suffix: '.min' })
browserslist 配置建议写在 package.json，例如："browserslist": ["> 1%", "last 2 versions", "not dead"]