Gulp - SCSS Lint - 如果 linting 失败，不要编译 SCSS

Question

只是想知道是否有人可以帮助我进行 Gulp 设置。目前我正在使用 gulp-sass 和 gulp-scss-lint 进行监视任务。我想要发生的是，当为 linting 任务完全运行保存一个 scss 文件时，如果 scss 文件不编译和 watch 继续运行，则抛出任何错误或警告。

目前我似乎有这个工作有错误但没有警告，它仍然编译样式表。

/// <binding ProjectOpened='serve' />
//  Macmillan Volunteering Village Gulp file.
//  This is used to automate the minification
//  of stylesheets and javascript files. Run using either
//  'gulp', 'gulp watch' or 'gulp serve' from a command line terminal.
//
//  Contents
//  --------
//    1. Includes and Requirements
//    2. SASS Automation
//    3. Live Serve
//    4. Watch Tasks
//    5. Build Task

'use strict';

//
//  1. Includes and Requirements
//  ----------------------------
//  Set the plugin requirements
//  for Gulp to function correctly.
var gulp = require('gulp'),
  notify = require("gulp-notify"),
  sass = require('gulp-sass'),
  scssLint = require('gulp-scss-lint'),
  gls = require('gulp-live-server'),

//  Set the default folder structure
//  variables
  styleSheets = 'Stylesheets/',
  styleSheetsDist = 'Content/css/',
  html = 'FrontEnd/';

//
//  2. SASS Automation
//  ------------------
//  Includes the minification of SASS
//  stylesheets. Output will be compressed.
gulp.task('sass', ['scss-lint'], function () {
  gulp.src(styleSheets + 'styles.scss')
  .pipe(sass({
    outputStyle: 'compressed'
  }))
  .on("error", notify.onError(function (error) {
    return error.message;
  }))
  .pipe(gulp.dest(styleSheetsDist))
  .pipe(notify({ message: "Stylesheets Compiled", title: "Stylesheets" }))
});

//  SCSS Linting. Ignores the reset file
gulp.task('scss-lint', function () {
  gulp.src([styleSheets + '**/*.scss', '!' + styleSheets + '**/_reset.scss'])
  .pipe(scssLint({
    'endless': true
  }))
  .on("error", notify.onError(function (error) {
    return error.message;
  }))
});

//
//  3. Live Serve
//  -------------
gulp.task('server', function () {
  var server = gls.static('/');
  server.start();

  // Browser Refresh
  gulp.watch([styleSheets + '**/*.scss', html + '**/*.html'], function () {
    server.notify.apply(server, arguments);
  });
});

//  Task to start the server, followed by watch
gulp.task('serve', ['default', 'server', 'watch']);


//
//  4. Watch Tasks
//  --------------
gulp.task('watch', function () {

  // Stylesheets Watch
  gulp.watch(styleSheets + '**/*.scss', ['scss-lint', 'sass']);
});

//
//  5. Build Task
//  --------------
gulp.task('default', ['sass']);

Answer 1

好像@juanfran 已经在 2015 年在 GitHub 上回答了这个问题。我就在这里重新发布一下。

1) 使用 gulp-if 您可以添加任何您喜欢的条件。

var sass = require('gulp-sass');
var gulpif = require('gulp-if');
var scssLint = require('gulp-scss-lint')

gulp.task('lint', function() {
    var condition = function(file) {
        return !(file.scssLint.errors || file.scssLint.warnings);
    };

    return gulp.src('**/*.scss')
        .pipe(scssLint())
        .pipe(gulpif(condition, sass()));
});

2) 另一个更具体的选项是使用 失败报告者 如果出现任何错误或警告，这将失败

gulp.task('scss-lint', function() {
    return gulp.src('**/*.scss')
        .pipe(scssLint())
        .pipe(scssLint.failReporter());
});

gulp.task('sass', ['scss-lint'], function() {
    return gulp.src('**/*.scss')
        .pipe(scss());
});