Gulp适合纯静态项目，Webpack必需于JS模块化场景。Gulp用插件链处理CSS预编译、加前缀、压缩、哈希；Webpack通过css-loader解析依赖，style-loader开发注入，mini-css-extract-plugin生产提取CSS。

为什么不能直接在 HTML 里写 link 引入 CSS？

手动维护样式文件路径、版本号、压缩状态，很快就会失控。比如改了 main.css，忘了更新 main.min.css；或者加了新变量，但没重新编译 Sass；又或者上线前漏掉 Autoprefixer，导致部分浏览器样式错乱。Gulp 和 Webpack 不是“锦上添花”，而是把 CSS 的生成、检查、注入、热更新变成可复现的步骤。

Gulp 处理 CSS 的典型流水线怎么搭？

适合已有项目、轻量构建、或只需要样式预处理+压缩的场景。核心是用插件链式调用，每步只做一件事：

• gulp-sass 把 .scss 编译成 CSS（注意：需额外装 sass 或 node-sass，新版推荐 sass）
• gulp-postcss + autoprefixer 补全浏览器前缀（配置里要明确写 ["last 2 versions", "iOS >= 10"]，否则默认规则可能过宽）
• gulp-clean-css 压缩（别用 minify，它不支持 @import 内联）
• gulp-rev 生成哈希后缀（如 main-3a2b1c.css），再用 gulp-rev-collector 替换 HTML 中的引用

关键点：Sass 的 @import 是编译期行为，Webpack 的 import 是模块依赖，二者不能混用；Gulp 里所有路径都基于 gulp.src() 的 glob 模式，src("src/css/**/*.scss") 不会自动包含 node_modules 下的库，得手动配 includePaths。

Webpack 如何把 CSS 当模块来管？

本质是靠 css-loader 解析 @import 和 url()，再用 style-loader 注入 标签，开发时热更新才真正生效。但要注意：

• 生产环境必须用 mini-css-extract-plugin 替代 style-loader，否则 CSS 会打到 JS 包里，无法并行加载
• postcss-loader 要放在 css-loader 之后、mini-css-extract-plugin 之前，顺序错就白配
• 如果用了 CSS Modules，localIdentName 配置不当会导致类名过长（如 Button_button__XyZ12），影响调试；建议开发用 [name]

  

  _[local]_[hash:base64:5]，生产用更短的哈希

常见报错 Module build failed: TypeError: this.getOptions is not a function，基本是 css-loader 和 webpack 版本不匹配——v6+ 的 css-loader 要求 Webpack 5，降级或升级得同步。

什么时候该选 Gulp，什么时候必须上 Webpack？

如果你的项目只有静态 HTML + Sass + 图片，没有 JS 模块化需求，Gulp 更轻、启动快、出错提示直白；但只要涉及 React/Vue 组件内联样式、CSS-in-JS、主题切换（运行时换 CSS 变量）、或需要和 JS 共享设计 Token（比如从 tokens.js 生成 CSS 自定义属性），Webpack 就绕不开——它的模块图能追踪 import "./Button.module.css" 到底依赖了哪些变量、哪些断点配置、甚至哪些 SVG 内联资源。

最容易被忽略的是 source map：Gulp 默认关，Webpack 默认开但仅限开发模式；上线前若没关 devtool: "source-map"，CSS 文件体积会暴增 3–5 倍，且暴露源文件路径。