怎么使BrowserSync+gulp-sass编译出错时不跳出gulp?

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("sass/*.scss", ['sass']);
    gulp.watch("./*.html").on('change', reload);
});

gulp.task('sass', function() {
    return gulp.src("sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['serve']);

gulpfile.js的代码就是以上。
我用BrowserSync监听了.html文件和sass中的.scss文件,.scss文件一旦修改就编译生成.css文件,然后自动刷新页面,修改.html也会刷新。但是问题来了,假如我在.scss中的代码错误的话,编译的时候就会出错,然后直接跳出gulp,那么我要怎么做才能防止其跳出,或者说不跳出地把错误信息打印出来并不进行编译?

阅读 3.9k
2 个回答

找到答案了,在sass中添加一个管道

// 异步编译,编译错误的话就停止编译到css中,就是跳过下一个操作,直接reload
.pipe(sass().on('error', sass.logError))

搞定!

plumber = require('gulp-plumber'),                 
gulp.task('sass', function() {
    return gulp.src("sass/*.scss")
        .pipe(plumber()) 
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(reload({stream: true}));
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题