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

Question

我想知道是否有人可以帮我设置Gulp。目前，我正在使用gulp-sass和gulp-scss-lint进行监视任务。我希望的是，当保存scss文件时，运行linting任务并完全检查，如果出现任何错误或警告，则不编译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']);

- Tenatious

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());
});

- Alexander Solovyev