Gulp - SCSS Lint - kompilieren Sie SCSS nicht, wenn Linting fehlschlägt

Question

Ich frage mich nur, ob mir jemand mit meinem Gulp Setup helfen kann. Im Moment verwende ich Schluck-Sass und Schluck-Scss-Lint mit einer Uhraufgabe. Was ich möchte, ist, wenn eine scss-Datei gespeichert wird, damit die linting-Aufgabe vollständig ausgeführt wird und wenn irgendwelche Fehler oder Warnungen ausgelöst werden, damit die scss-Dateien nicht kompiliert werden und die Überwachung weiterhin ausgeführt wird.

Im Moment scheint mir das mit Fehlern zu arbeiten, aber nicht mit den Warnungen, die die Stylesheets noch kompilieren.

/// <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

Es scheint, dass @juanfran diese Frage auf GitHub beantwortet hat im Jahr 2015. Ich werde es nur hier umbuchen.

1) Mit gulp-if können Sie jede Bedingung hinzufügen, die Sie mögen.

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) Eine weitere speziellere Option istFail-Reporter zu verwenden, die im Falle von Fehlern oder Warnungen

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

scheitern