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

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