gulp-less 默认不捕获错误导致watch中断，需用plumber()或.on('error')处理；路径匹配需用**递归通配符；autoprefixer和cssnano上线必加；热更新需browser-sync配合gulp.series确保编译完成再reload。
gulp-less 本身不处理错误中断，一旦 .less 文件语法出错，整个 watch 任务就卡死——这不是 bug，是默认行为。必须主动加错误捕获，否则改完错还得手动重启 gulp。
为什么 gulp.watch 一报错就停？
因为 gulp-less 在编译失败时会 throw error，而 gulp.watch 默认不监听 stream 的 error 事件，直接崩掉。常见现象是：改了一个 color: @primary; 但漏写了变量定义，控制台打出 Error in plugin "gulp-less"，之后文件再怎么改，CSS 就再也不生成了。
解决方式很简单，给 pipe(less()) 后加 .on('error', console.error)，或者用 gulp-plumber 拦住错误流：
const plumber = require('gulp-plumber');
gulp.task('less', () => {
return gulp.src('src/less/**/*.less')
.pipe(plumber()) // ← 关键：防止错误终止 pipeline
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
gulp-less 的路径和输出目录怎么配才不踩坑？
很多人卡在“文件没生成”或“生成到奇怪位置”，本质是 gulp.src 和 gulp.dest 的路径理解偏差：
-
gulp.src('less/*.less')只匹配less/目录下的 .less 文件，不递归子目录；要递归请写less/**/*.less -
gulp.dest('css')是按src中的相对路径结构来创建目录的。比如src/less/components/button.less经过src('less/**/*.less')→dest('css')，会输出到css/components/button.css - 如果只想扁平输出（所有 CSS 都扔进
css/根目录），得用gulp-flatmap或在 pipe 里用rename改file.path
要不要加 autoprefixer 和 cssnano？
纯开发阶段可以先跳过；但上线前必须加——less() 输出的是标准 CSS，不带浏览器前缀，也不压缩。不加 autoprefixer，Flexbox 或 gap 在旧版 Safari 上大概率失效；不加 cssnano（或 gulp-clean-css），体积可能多出 30%+。
立即学习“前端免费学习笔记（深入）”；
典型链路：
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
gulp.task('less:prod', () => {
return gulp.src('src/less/**/*.less')
.pipe(plumber())
.pipe(less())
.pipe(autoprefixer({ overrideBrowserslist: ['> 1%', 'last 2 versions'] }))
.pipe(cssnano({ preset: ['default', { discardComments: { removeAll: true } }] }))
.pipe(gulp.dest('dist/css'));
});
注意：autoprefixer 的 overrideBrowserslist 参数比旧版 browsers 更可靠，Node 14+ 环境下推荐用前者。
Watch 任务重启后样式不热更新？
不是 Gulp 的问题，是浏览器没刷新。单纯 gulp.watch 只负责文件监听和编译，不触发页面重载。要真自动，得接 browser-sync：
const browserSync = require('browser-sync').create();
gulp.task('serve', () => {
browserSync.init({ server: './' });
gulp.watch('src/less/**/*.less').on('change', gulp.series('less', browserSync.reload));
});
这里关键点是：不能只写 browserSync.reload，必须包装成 gulp.series('less', browserSync.reload)，否则 CSS 编译完成前就 reload，页面会加载旧样式。
另外，browserSync.init 的 server 路径要对准你实际访问的根目录，比如用 http-server 开在 ./public，那这里就得写 { server: './public' }。
plumber() 和 ** 通配符。 
