gulp-clean-css仅压缩css内容而不修改文件名，需配合gulp-rename在cleancss后、dest前重命名；推荐用suffix: '.min'而非extname，且应分设css:dev与css:prod任务以兼顾调试与发布需求。
直接用 gulp-clean-css 压缩 CSS 后，文件名不会变；要重命名（比如加 .min.css 后缀），必须额外引入 gulp-rename 插件，且顺序不能错——rename 必须在 cleanCSS 之后、dest 之前。
为什么压缩后文件名没变？
gulp-clean-css 只负责内容压缩，不碰文件名。它输出的仍是 style.css，不是 style.min.css。这是插件设计使然，不是 bug。
- 常见误操作：只装了
gulp-clean-css，以为它自带重命名逻辑 - 真实行为：输入
src/css/main.css→ 压缩内容 → 输出同名文件到dist/css/main.css - 后果：上线时无法区分源文件和压缩版，CDN 缓存或版本管理容易出错
如何正确添加 .min.css 后缀？
用 gulp-rename 在压缩后、写入磁盘前修改文件名。关键点是执行顺序：
- 先
gulp.src()读取源文件 - 再
cleanCSS()压缩内容 - 然后
rename({ suffix: '.min' })改名 - 最后
gulp.dest()写出
示例代码：
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
gulp.task('css-minify', () => {
return gulp.src('src/css/*.css')
.pipe(cleanCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('dist/css'));
});
执行后，src/css/button.css 会变成 dist/css/button.min.css。
重命名时容易踩的坑
看似简单，但以下几点常被忽略：
-
rename必须放在cleanCSS之后——如果放前面，压缩后的文件仍叫button.css，重命名就白做了 - 不要混用
rename({ extname: '.min.css' })和suffix：前者会覆盖原扩展名（如.css变成.min.css），后者只是追加（button.css→button.min.css），推荐用suffix - 若需保留原始未压缩版，别只靠重命名；应另起一个任务单独输出非压缩版，或用
gulp-if分流 - 配合
watch时，确保监听路径包含所有可能被@import引入的 CSS 文件（包括_partial.css），否则重命名后部分样式丢失
要不要同时生成未压缩版用于调试？
线上部署要压缩版，但本地开发或 QA 环境常需未压缩版查样式问题。这不是“多此一举”，而是协作刚需。
- 最稳妥做法：两个独立任务，比如
css:dev（不压缩、不重命名）和css:prod（压缩 +.min） - 避免用同一任务输出双版本——容易混淆输出路径，
dest冲突或覆盖 - 如果硬要单任务双输出，得用
gulp-clone或merge2，但增加复杂度，小项目不推荐
真正麻烦的不是加个 rename，而是 sourcemap 链断裂、@import 路径错乱、以及 autoprefixer 没在压缩前跑完——这些错误不会报红，但会让 flex-gap 在 IE 里失效，或者让字体 Unicode 转义被双写成 \5FAE。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
