gulp.src无法处理@import，必须用postcss-import显式内联并配置resolve函数；autoprefixer须在cleancss前执行；sourcemap需严格按init→cleancss({sourcemap:true})→write三步；rev替换html引用需确保manifest路径、键名及replaceinhtml选项一致。
gulp.src 无法自动处理 @import，必须用 postcss-import 显式内联
直接 gulp.src('src/css/*.css') 只读取匹配到的顶层文件，完全忽略 @import 语句。比如 app.css 里写了 @import 'reset.css';，但 reset.css 不在 glob 范围内，最终压缩产物里就只剩 app.css 的内容，样式大面积丢失。
必须引入 postcss-import 并显式配置 resolve 函数：
- 安装：
npm install --save-dev gulp-postcss postcss postcss-import - 在
gulpfile.js中确保postcss([require('postcss-import')])在cleanCSS()之前执行 - 若存在相对路径（如
@import '../vars.css'），需传入{ resolve: (id, from) => path.resolve(path.dirname(from), id) }，否则解析失败
autoprefixer 和 cleanCSS 的执行顺序不能颠倒
把 autoprefixer 放在 cleanCSS 后面，会导致它处理的是已压缩成单行、无缩进的 CSS，结果：
-
@media块内嵌套规则解析失败，报Unclosed bracket -
flex-gap、aspect-ratio等新特性没加前缀，IE 或旧 Safari 直接失效 - 部分选择器被误判为无效而丢弃
正确链路是：postcss([postcss-import, autoprefixer]) → cleanCSS() → rename({ suffix: '.min' })
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
rev 插件替换 HTML 中的 CSS 引用容易失败
gulp-rev + gulp-rev-collector 替换失败，常见原因有三个：
-
rev.manifest()输出的 JSON 文件路径与revCollector()读取路径不一致（比如一个写进./rev/，另一个却从./dist/rev/读） - HTML 中引用的 CSS 文件名（如
style.css）和rev实际生成的文件名（如style-abc123.min.css）不匹配，导致 key 查不到 - 没启用
replaceReved: true，或者dirReplacements配置错误（例如写成{ css: 'css' }，但实际输出路径是dist/css）
最稳妥的做法：先确认 rev-manifest.json 里 key 是原始文件名（不含路径），value 是带哈希的完整文件名；再确保 HTML 中引用的是原始名，且 revCollector 的 dirReplacements 指向最终部署路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
