Gulp - SCSS Lint - Don't compile SCSS if linting fails

Question

Just wondering if someone can help me with my Gulp setup. At the moment I am using gulp-sass and gulp-scss-lint with a watch task. What I want to happen is that when an scss file is saved for the linting task to run completely and if any errors or warnings are thrown up for the scss files not to compile and for watch to continue running.

At the moment I seem to have this working with errors but not with the warnings, which still compile the stylesheets.

/// <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']);

score 0 · Answer 1 · answered Mar 08 '18 at 18:17

Seems that @juanfran has answered this question on GitHub in 2015. I will just repost it here.

1) Using gulp-if you can add any condition 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 Fail reporter that 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());
});

Gulp - SCSS Lint - Don't compile SCSS if linting fails

1 Answers1