Как я могу связать свои стили, используя gulp-sass и gulp-stylelint - PullRequest
Новая
       44

Как я могу связать свои стили, используя gulp-sass и gulp-stylelint

0 голосов
/ 17 ноября 2018

У меня есть несколько файлов 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
}

Я компилирую sass стили gulp следующим образом: 

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 перед компиляцией, но включить операторы импорта.

1 Ответ

0 голосов
/ 21 ноября 2018

Создайте отдельную задачу для раскрашивания ваших файлов Scss. У вас должна быть задача для компиляции ваших стилей, а другая - для их раскрашивания. Проблема заключается в попытке объединить эти отдельные задачи в одну. 

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'));
});
...