0

什么是链接 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"

4

1 回答 1

0

我处理这个任务，使用 CSSO 而不是你的 cleanCSS，但使用你想要的任何东西，棘手的部分是源映射，有时会弄乱路径。

  1. 声明源路径
  2. 初始化 SourceMaps
  3. 将 SCSS 编译成 CSS
  4. 添加正确的前缀支持
  5. 将 SourceMaps 粘贴到生成的指向 SCSS 文件的 CSS 文件中
  6. 压缩 CSS 文件（这可能会删除源映射，除非您告诉包保存注释）
  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'));
});
于 2016-09-05T06:56:19.360 回答