Gulp项目如何合并并引入CSS文件

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 函数：

1. 安装：npm install --save-dev gulp-postcss postcss postcss-import
2. 在 gulpfile.js 中确保 postcss([require('postcss-import')]) 在 cleanCSS() 之前执行
3. 若存在相对路径（如 @import '../vars.css'），需传入 { resolve: (id, from) => path.resolve(path.dirname(from), id) }，否则解析失败

autoprefixer 和 cleanCSS 的执行顺序不能颠倒

把 autoprefixer 放在 cleanCSS 后面，会导致它处理的是已压缩成单行、无缩进的 CSS，结果：

1. @media 块内嵌套规则解析失败，报 Unclosed bracket
2. flex-gap、aspect-ratio 等新特性没加前缀，IE 或旧 Safari 直接失效
3. 部分选择器被误判为无效而丢弃

正确链路是：postcss([postcss-import, autoprefixer]) → cleanCSS() → rename({ suffix: '.min' })

sourcemap 必须三步严格按序，缺一不可

gulp-clean-css 默认关闭 sourcemap，即使你用了 gulp-sourcemaps，也不会自动生效——浏览器里看到的全是压缩后的一行，无法定位原始位置。

必须按以下顺序写死：

1. 先 gulp-sourcemaps.init()
2. 再 cleanCSS({ sourceMap: true })（sourceMap: true 缺一不可）
3. 最后 gulp-sourcemaps.write('./')

漏掉任意一步，或顺序错乱，sourcemap 就是空文件，或报错 Cannot read property 'sources' of null

rev 插件替换 HTML 中的 CSS 引用容易失败

gulp-rev + gulp-rev-collector 替换失败，常见原因有三个：

1. rev.manifest() 输出的 JSON 文件路径与 revCollector() 读取路径不一致（比如一个写进 ./rev/，另一个却从 ./dist/rev/ 读）
2. HTML 中引用的 CSS 文件名（如 style.css）和 rev 实际生成的文件名（如 style-abc123.min.css）不匹配，导致 key 查不到
3. 没启用 replaceReved: true，或者 dirReplacements 配置错误（例如写成 { css: 'css' }，但实际输出路径是 dist/css）

最稳妥的做法：先确认 rev-manifest.json 里 key 是原始文件名（不含路径），value 是带哈希的完整文件名；再确保 HTML 中引用的是原始名，且 revCollector 的 dirReplacements 指向最终部署路径