编译前在 Gulp 中检查 SASS答案

【问题标题】：Lint SASS in Gulp before compiling编译前在 Gulp 中检查 SASS
【发布时间】：2015-12-10 11:58:46
【问题描述】：

我是 Gulp 的新手，我正在尝试在编译之前对 scss 文件进行 lint，以避免 gulp watcher 崩溃。

我的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 watcher 显示错误信息但停止监视，因为 gulp 中断了它的执行。我该如何解决这个问题？

【问题讨论】：

标签： sass gulp lint

【解决方案1】：

我假设你正在使用gulp-sass pluging，如果你没有使用，我建议你这样做。它是node-sass 的包装器，它是 C 版本：超快 :)

在gulp-sass 文档中，他们已经为您提供了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'));
});

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

【讨论】：