必须安装 sass（非 node-sass）：npm install sass -D，否则运行时报“Cannot find module 'sass'”；gulp-sass 仅为包装器，真正编译依赖 sass 运行时。
用 gulp-sass 编译 SCSS，别漏装 sass 运行时
直接 npm install gulp-sass -D 是不够的——gulp-sass 本身只是个包装器，真正干活的是底层的 Dart Sass。必须额外安装 sass（不是 node-sass，后者已废弃）：npm install sass -D。
否则运行时会报错：Error: Cannot find module 'sass' 或提示 Missing peer dependency。
验证方式：在 gulpfile.js 中写 require('sass') 不抛异常才算到位。
outputStyle: 'compressed' 是压缩开关，但不等于“生产就绪”
仅靠 sass({ outputStyle: 'compressed' }) 只能移除空格和换行，不处理以下问题：
• 未使用的 CSS 规则（需 cssnano 或 gulp-clean-css）
• 缺失浏览器前缀（需 gulp-autoprefixer）
• 重复或冗余声明（如多个 color 声明）
所以实际生产链路应是：.pipe(sass({ outputStyle: 'compressed' })).pipe(autoprefixer(...)).pipe(cleanCss())
三者顺序不能颠倒：先编译，再补前缀，最后压缩。
监听 + 并行任务要防重复触发和错误中断
用 gulp.watch() 监听 SCSS 文件时，常见两个坑：
• 修改一个文件，触发多次编译（尤其保存快、编辑器自动保存频繁时）→ 改用 gulp.series() 包裹任务，并加防抖逻辑，或直接用 chokidar 替代原生 watch
• 编译出错（比如语法错误）后，后续管道中断，CSS 不生成 → 必须加 .on('error', sass.logError)，否则终端卡住、无报错、无输出
示例写法：gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
其中 'sass' 任务内部已包含错误监听和完整管道
路径和输出目标容易混淆，gulp.dest() 不会自动创建父目录
gulp.src('src/scss/*.scss') 能匹配多级子目录，但 gulp.dest('dist/css') 只写到 css 目录层；如果 dist 不存在，Gulp 不会报错，也不会自动建目录，而是静默失败——最终你找不到任何输出文件。
解决方法：
• 启动任务前手动确保 dist/css 存在
• 或用 mkdirp 插件提前创建：const mkdirp = require('mkdirp'); + mkdirp.sync('dist/css');
• 更稳妥的做法是把构建拆成 clean 任务（清空 dist），再执行编译，避免旧文件残留干扰
立即学习“前端免费学习笔记（深入）”；
Gulp 的流式处理优势明显，但真正稳定跑通 SCSS 到压缩 CSS 的链路，关键不在“能不能”，而在是否堵住了sass 运行时缺失、错误未捕获、目录未就位、压缩不彻底这几个最常卡住人的点。 
