javascript - 如何使用 gulp-sass 和 gulp-stylelint 对我的样式进行 lint

Question

我有几个应该单独编译的 SASS 文件。我想把他们的和他们的“进口”

我有一些 sass 文件：

// style.scss

@import "./styles/a.scss";

body {
  background-color: #FFF;
}


// styles/a.scss
h1 {
  font-size: 28px;
  color: #GGG; // invalid hex to test stylelint
}

我像这样通过 gulp 编译 sass 样式：

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');

function compileStyles(src, dest) {
  gulp.src(src)
    .pipe(plumber({
      errorHandler: console.error
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(dest));
}

compileStyles('src/style.scss', 'dest');

我想在这里添加 stylelint。我尝试通过添加 stylelint 来做到这一点

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const gulpStylelint = require('gulp-stylelint');

function compileStyles(src, dest) {
  gulp.src(src)
    .pipe(plumber({
      errorHandler: console.error
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulpStylelint({
      failAfterError: true,
      reporters: [
        {formatter: 'string', console: true}
      ]
    }))
    .pipe(gulp.dest(dest));
}

compileStyles('src/style.scss', 'dest');

它有效，但 stylelint 处理编译样式。如何在编译之前应用 stylelint，但包括导入语句。

Answer 1

创建一个单独的任务来检查您的 Scss 文件。你应该有一个任务来编译你的样式，另一个任务是对它们进行 linting。正是试图将这些单独的任务组合成一个导致问题的任务。

gulp.task('lint-styles', function lintStyles() {
  const gulpStylelint = require('gulp-stylelint');    
  return gulp
    .src('src/**/*.scss')
    .pipe(gulpStylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
    }));
});

gulp.task('compile-styles', function compileStyles() {
  const gulpSass = require('gulp-sass');    
  return gulp
    .src('src/style.scss')
    .pipe(gulpSass())
    .pipe(gulp.dest('dest'));
});