编译前 Gulp 中的 Lint SASS

Question

我是 Gulp 的新手，我正在尝试在编译 scss 文件之前对它们进行 lint，以避免 gulp 观察者中断。

我的 gulpfile.js 现在看起来像这样：

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

// Sass compilation to css
gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init()) // Process the original sources
    .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/css'));
});

// Configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('source/scss/**/*.scss', ['build-css']);
});

当我在 scss 文件中输入错误时，例如：

body {
    color: $non-existing-var;
}

gulp 观察者显示错误信息但停止观察因为gulp 中断了它的执行。我该如何解决这个问题？

Answer 1

我假设您使用的是 gulp-sass pluging, if you are not using, I suggest you to do it. It is a wrapper over node-sass，这是 C 版本：超级快:)

在 gulp-sass documentation, they already have you covered with one example，所以你的任务应该是这样的：

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init()) // Process the original sources
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/css'));
});

希望这可以帮助您完成您正在寻找的东西:)

编译前 Gulp 中的 Lint SASS

Lint SASS in Gulp before compiling

lint

sass

gulp