Gulp - SCSS Lint - do not compile SCSS if linting does not work

Question

Just wondering if anyone can help me with setting up Gulp. I am currently using gulp -sass and gulp -scss-lint with a view task. What I want to do is that when the scss file is saved for the line task, and if any errors or warnings occur, if the scss files are not compiled and the clock continues to work.

Right now, I seem to be working with errors, but not with warnings that still compile style sheets.

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

It seems that @juanfran answered this question on GitHub in 2015. I will just post it here.

1) Using gulp -if , you can add any condition that you like.

 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) Another more specific option is to use the Fail reporter , which will fail in case of any errors or warnings

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