Получение правильных исходных карт (gulp sass + cleanCss + prefixer + uncss)

Question

Как лучше всего связать gulp для компиляции sass в чистый CSS (с префиксом, без CSS и минимизированный).

В следующем примере создаются исходные карты, но они указывают на неправильные номера строк в исходных файлах при просмотре в инспекторе браузера.

var plugins = require('gulp-load-plugins')(),
    bourbon = require('node-bourbon').includePaths,
    neat = require('node-neat').includePaths;
gulp.task('default', function () {
  return gulp.src('src/scss/**/*.scss')
  .pipe(plugins.sourcemaps.init())
  .pipe(plugins.sass({includePaths: bourbon, includePaths: neat}))
  .on('error',plugins.util.log.bind(plugins.util, 'Sass Error'))
  .pipe(plugins.concat('styles.css'))
  .pipe(plugins.uncss({html: ['dist/**/*.html']}))
  .pipe(plugins.autoprefixer())
  .pipe(plugins.cleanCss())
  .pipe(plugins.sourcemaps.write('.'))
  .pipe(gulp.dest('dist/css/'));
 });

В попытке решить эту проблему, я пытался вывести исходные карты, прежде чем autoprefixer а также cleanCss но это приводит к ошибке, связанной с путями "Neat" и "Burbon": Error: Broken @import declaration of "../neat" Broken @import declaration of "../colors" Broken @import declaration of "../variables" Broken @import declaration of "../grid" Broken @import declaration of "../tables"

Answer 1

Я работаю с этой задачей, используя CSSO вместо cleanCSS, но использую все, что вы хотите, сложная часть - это исходные карты, иногда путающие пути.

1. Объявите исходный путь
2. Init SourceMaps
3. Скомпилировать SCSS в CSS
4. Добавьте поддержку правильного префикса
5. Вставьте SourceMaps в сгенерированный файл CSS, указывая на файлы SCSS
6. Сожмите файл CSS (это, вероятно, удалит исходные карты, если вы не сказали пакету сохранять комментарии)
7. Объявите путь к Dest

Gulpfile: SASS Task

const gulp            = require('gulp'),

      autoprefixer    = require('gulp-autoprefixer'),
      csso            = require('gulp-csso'),
      sass            = require('gulp-sass'),
      sourcemaps      = require('gulp-sourcemaps');


gulp.task('sass', ['sass'], () => {

  return gulp
    .src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write())
    .pipe(csso())
    .pipe(gulp.dest('dist/css'));
});