获取正确的源图（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. 初始化 SourceMaps
3. 将 SCSS 编译成 CSS
4. 添加正确的前缀支持
5. 在生成的指向 SCSS 文件的 CSS 文件中粘贴 SourceMaps
6. 压缩 CSS 文件（这可能会删除源映射，除非您告诉包保存 cmets）
7. 声明一个目标路径

Gulpfile：SASS 任务

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