Gulp运行Browser-sync报错提示

发布于 2022-09-06 03:07:58 字数 2477 浏览 6 评论 0

图片描述

在运行 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

有人知道这是为什么吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

毁梦 2022-09-13 03:07:58

看看less文件中有没有错误

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文