Question

将gulp编译成干净的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" < / p>

Answer 1

我使用CSSO代替你的cleanCSS，但是使用你想要的任何东西，棘手的部分是源图，有时会弄乱路径。

声明源路径
Init SourceMaps
将SCSS编译为CSS
添加正确的前缀支持
将SourceMaps粘贴到生成的指向SCSS文件的CSS文件中
压缩CSS文件（这可能会删除源图，除非您告诉包保存注释）
声明目标路径

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

获取正确的源图（gulp sass + cleanCss + prefixer + uncss）

1 个答案: