直接压缩多个css文件会丢失@import引入的样式，因原生gulp.src不解析@import；必须用postcss-import提前内联依赖，并显式配置resolve函数处理路径；sourcemap需严格按init→cleancss({sourcemap:true})→write三步执行；autoprefixer须在cleancss前运行；rev插件需确保manifest路径、html引用键名及replaceinhtml选项正确。
直接压缩多个CSS文件会丢失@import引入的样式
原生 gulp.src('src/css/*.css') 只读取匹配的顶层文件，完全忽略 @import 语句。比如 base.css 里写了 @import 'reset.css';，但 reset.css 不在 glob 匹配范围内，压缩后就只剩 base.css 的内容，样式大面积失效。
必须用 PostCSS + postcss-import 提前解析并内联所有依赖：
- 安装：
npm install --save-dev gulp-postcss postcss postcss-import - 在
gulpfile.js中确保postcss([require('postcss-import')])在cleanCSS()之前执行 -
postcss-import默认以被 import 的文件所在目录为根，若路径错乱（如@import '../vars.css'），需显式传入{ resolve: (id, from) => path.resolve(path.dirname(from), id) }
压缩后调试困难？sourcemap 默认不生效
gulp-clean-css 默认关闭 sourcemap，即使你用了 gulp-sourcemaps，也不会自动读写——结果浏览器开发者工具里看到的全是压缩后的一行，找不到原始位置。
必须三步严格按序：
- 先
gulp-sourcemaps.init() - 再
cleanCSS({ sourceMap: true })（sourceMap: true缺一不可） - 最后
gulp-sourcemaps.write('./')
漏掉任意一步，或顺序颠倒，sourcemap 就是空文件或报错 Cannot read property 'sources' of null。
autoprefixer 必须在 cleanCSS 之前运行
如果把 autoprefixer 放在 cleanCSS 后面，它处理的是已压缩成单行、无换行无缩进的 CSS，会导致：
- 嵌套规则（如
@media块内属性）解析失败 - 报错
Unclosed bracket或Unexpected token - flex-gap、
aspect-ratio等新特性没加前缀，IE/旧 Safari 直接失效
正确链路是：postcss([postcss-import, autoprefixer]) → cleanCSS() → rename({ suffix: '.min' })。browserslist 配置建议写在 package.json 里，例如："browserslist": ["> 1%", "last 2 versions", "not dead"]。
合并后文件名带 hash 但 HTML 没更新？rev 插件容易配错路径
用 gulp-rev 生成 main.css?rev=abc123 类似效果时，常见错误是 revCollector() 找不到 manifest 文件，或 HTML 中的 <link> 路径与 rev-manifest.json 键名不一致。
- 确保
rev()输出的 manifest 路径（如rev/css/rev-manifest.json）被revCollector()正确读取 -
revCollector()的gulp.src必须同时包含 manifest 和 HTML 文件，且顺序不能反（manifest 必须在前） - HTML 中引用路径需与 manifest 的 key 完全匹配，比如 manifest 写
"main.css": "main-abc123.css"，HTML 就得是href="css/main.css"，不能写成href="main.css"或带多余前缀
真正麻烦的不是配置本身，而是当 CSS 里有 url(../img/icon.png) 这类相对路径时，rev 默认不处理它们——得额外加 gulp-rev-collector 的 replaceInHtml: true 选项，或改用 gulp-asset-rev。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
