gulp.src() 选中多个 css 文件需正确使用通配符:* 不递归子目录,** 才匹配所有层级;推荐明确路径数组或 ./src/css/**/*.css,排除用 !./src/css/vendor/*.css;顺序敏感,须先 concat 再 cleancss。

怎么用 gulp.src() 选中多个 CSS 文件
关键不是“多个”,而是路径通配符的写法是否匹配真实文件结构。常见错误是写成 ./src/css/*.css 却实际文件在 ./src/css/base/*.css 或 ./src/css/**.css(漏了双星号)。Gulp 默认不递归子目录,** 才表示后代所有层级。
推荐写法:
-
['./src/css/reset.css', './src/css/main.css', './src/css/theme.css']—— 明确指定,适合固定 SDK 类项目 -
'./src/css/**/*.css'—— 匹配所有子目录下的 .css,但要注意顺序(Gulp 不保证读取顺序,需靠文件名前缀或手动排序) -
['./src/css/*.css', '!./src/css/vendor/*.css']—— 排除某目录,避免误压第三方样式
gulp-concat 和 gulp-clean-css 的执行顺序不能颠倒
必须先 concat 再 clean-css(或 minifycss),否则压缩的是单个文件,合并后反而出现重复声明、冗余规则。反过来——先压缩再合并——会导致 @import 被破坏、source map 错位、甚至部分插件报错 Cannot read property 'length' of undefined。
典型安全链路:
gulp.src(...).pipe(concat('bundle.min.css'))-
.pipe(cleanCSS())(注意:旧插件gulp-minify-css已废弃,优先用gulp-clean-css) .pipe(gulp.dest('./dist'))
为什么加了 gulp-rev 后 HTML 里还是没更新 CSS 引用
只运行 rev 任务生成 rev-manifest.json 是不够的。必须额外跑一个 revCollector 任务,且它要同时读取 rev-manifest.json 和 HTML 模板文件(如 index.html),才能把 <link rel="stylesheet" href="style.css"> 替换成 <link rel="stylesheet" href="style-abc123.css">。
容易忽略的点:
-
gulp.src(['./rev/rev-manifest.json', './src/index.html'])中路径必须准确,尤其rev-manifest.json默认输出在./rev/,别写成./dist/rev/ -
revCollector()不会修改原 HTML,而是输出新文件到gulp.dest()目录,得确认上线部署的是那个目录 - 如果 HTML 是后端模板(如 PHP、JSP),
revCollector无法解析服务端 include,此时应改用gulp-rev-append或服务端注入版本号
ES6+ CSS 特性(比如 @layer、color-mix())会被 clean-css 破坏吗
默认不会。gulp-clean-css(v4+)已支持现代 CSS 语法,但前提是没开启激进压缩选项。如果你用了 cleanCSS({ level: 2 }),它可能移除未使用的 @layer 声明或重写 color-mix() 表达式导致渲染异常。
稳妥做法:
- 保持默认
level: 1(仅基础压缩) - 若必须开 level 2,加白名单:
cleanCSS({ level: { 2: { removeUnusedAtRules: false } } }) - 对含 CSS-in-JS 或构建时生成的 CSS,建议跳过
clean-css,改用 PostCSS + cssnano 控制粒度
真正危险的不是压缩器,而是你忘了检查最终输出的 CSS 是否还能被目标浏览器解析——尤其是当项目要兼容 iOS Safari 15.6 之前版本时,@container 这类特性即使不压缩也会直接失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











