Gulp运行Browser-sync报错提示

Question

在运行 gulp的时候 提示报了一个这个错误 ， 之前运行还是可以的不知道为什么就这样了 ，一直没找到问题所在

目录结构：

我的配置代码：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create(),//编辑JS、HTML、Css实现无刷新页面操作
reload = browserSync.reload;

function handleError(err) {
console.log(err.toString());
this.emit('end');
}
//执行
gulp.task("less", function () {
return gulp.src(['LessDir/*.less']) //less文件的地址 src-->less下**:任意目录 :任意文件名
// return gulp.src(['LessDir/.less', '!LessDir/{finishS,happy,hks_common,index,money,photo,returnY,tabPhoto,yuyue}.less'])
.pipe(sourcemaps.init())
.pipe(less()).on('error', handleError)
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: true
}))
.pipe(sourcemaps.write())
// .pipe(cleanCSS())
.pipe(gulp.dest('css')) //css输出目录位置
.pipe(reload({stream: true}));//这个结合了 Browsersync 来使用
});

gulp.task('js', function(){//需要在Watchjs下添加jS文件自动便已到 指定的dest下去
return gulp.src('Watchjs/**/*.js')
// .pipe(minify())
.pipe(gulp.dest("js"))
.pipe(reload({stream: true}));//这个结合了 Browsersync 来使用
});

//根据less 样式编译后 自动的执行watch 无须手动执行
gulp.task('watch',function(){
var watcher = gulp.watch(['LessDir/*.less'],['less']);//当所有less文件发生改变时，调用Less任务
watcher.on('change',function(event){
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
})
});

// 静态服务器
gulp.task('browser-sync', function() {
browserSync.init({
server: {//这个目录是相对于 当前的gulpfile.js当前目录
baseDir: "./"
}
});
});

// 静态服务器 + 监听 scss/html 文件
gulp.task('serve', ['less'], function() {
browserSync.init({
// port: '8888',
// ui: false,
server: "./"
});
gulp.watch(['LessDir/*.less'], ['less']);
// gulp.watch(['Watchjs/**/*.js'], ['js']);
gulp.watch("./*.html").on('change', reload);

});

gulp.task('default', ['less','watch','serve']);//执行(default)执行的是 Browser-sync

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

从您提供的信息来看，似乎您遇到了一个与gulp-autoprefixer相关的错误。这可能是由于以下原因导致的：

1. gulp-autoprefixer没有正确安装或设置。
2. less 或 autoprefixer 的版本不兼容。

解决方法可能包括：

• 确保已经正确安装了 gulp-autoprefixer 和 less。
• 如果使用的是 npm 包，请确保它们已通过 npm install 安装。
• 尝试更新 less 和 autoprefixer 到最新版本，因为这些库可能会引入一些新功能和改进。
• 如果可能的话，尝试将您的项目中的 less 和 css 输出重定向到一个新的目录，例如 /dist/，然后检查是否有任何差异。
• 在浏览器中查看是否有任何样式冲突，并尝试清除缓存。

如果以上步骤都不能解决问题，那么可能需要进一步排查项目的依赖关系或者寻找更专业的帮助。希望这对您有所帮助！