必须加错误捕获、autoprefixer和cssnano，否则编译中断或样式失效；需用gulp-plumber或on('error')防止watch卡死；glob须用**递归匹配；autoprefixer需指定browsers；cssnano压缩更优；browser-sync reload须串行执行并返回Promise。
必须加错误捕获、autoprefixer 和 cssnano，否则编译会中断或上线后样式失效。
gulp-less 编译失败就卡死？必须加错误处理
默认情况下 gulp-less 一遇到语法错误（比如变量未定义、括号漏写）就会 throw error，而 gulp.watch 不监听 stream 的 error 事件，直接终止整个任务。现象是：改完一个 .less 文件报错后，后续任何保存都不再触发编译。
- 用
gulp-plumber拦住错误流最稳妥：.pipe(plumber())放在.pipe(less())前面 - 或者手动监听：
.pipe(less()).on('error', console.error) - 别只在开发时忽略——哪怕只是临时跳过，也得显式写个空
.on('error', () => {})，否则 watch 就是纸糊的
路径匹配和输出结构怎么配才不丢文件
gulp.src() 的 glob 写法直接影响能否找到子目录下的文件；gulp.dest() 则按源文件相对路径自动建目录，不是“扁平复制”。
- 要递归编译所有
.less文件，必须用**：gulp.src('src/less/**/*.less')，而不是src/less/*.less -
gulp.dest('dist/css')会保留原始层级，例如src/less/components/button.less→dist/css/components/button.css - 如果想全部压到
dist/css/根目录下，得加gulp-rename改file.path，或者用gulp-flatmap
autoprefixer 和 cssnano 是上线前强制项
less() 输出的是标准 CSS，不带浏览器前缀、不压缩。跳过这两步，等于把兼容性和性能问题留给用户。
立即学习“前端免费学习笔记（深入）”；
-
autoprefixer必须指定browsers或用overrideBrowserslist（新版）：.pipe(autoprefixer({ overrideBrowserslist: ['last 2 versions', 'iOS >= 10'] })) -
cssnano比gulp-clean-css更现代，压缩率更高；注意它默认启用所有优化，如需保留注释要显式关掉：.pipe(cssnano({ preset: ['default', { discardComments: { removeAll: true } }] })) - 开发阶段可先去掉
cssnano方便调试，但构建脚本（如gulp build）里必须包含
热更新 reload 总是提前触发？顺序不能错
browser-sync 的 .reload() 如果在 CSS 还没写入磁盘时就执行，页面会加载旧文件，导致改了样式却看不到效果。
- 必须用
gulp.series确保任务串行：gulp.series('less:compile', 'bs:reload')，不能靠gulp.parallel或监听多个事件混搭 -
bs:reload任务里别直接写browserSync.reload()，应返回一个 stream 或 Promise，让 gulp 知道它何时完成 - 如果用
gulp.watch监听.less并自动跑任务，watch 的回调函数里必须 return 该 series，否则 gulp 不等它结束就认为任务完了
最容易被忽略的是错误处理和任务依赖顺序——它们不报错，但会让自动化流程在关键时刻静默失效。写完 gulpfile.js 后，务必故意写一个语法错误的 .less 文件，验证 watch 是否持续运行；再改回正确代码，确认 CSS 真的更新且页面 reload 正确。这比读十遍文档都管用。
