使用gulp,SASS和autoprefixer无法正确生成CSS源图

Question

我有以下gulp任务:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.src('html/css/sass/*.scss')
    .pipe(sass({
        style: 'compressed',
        loadPath: 'plugin/css/sass',
        sourcemap: true,
        sourcemapPath: '/css/sass',
        container : 'local_sass'
    }))
    .pipe(autoprefixer())
    .pipe(gulp.dest('html/css'));

我遇到的问题是SASS编译器正确生成源图并添加源图注释,但随后autoprefixer删除了注释(我不认为它也在更新源图).

我已经尝试删除autoprefixer并且它工作正常,但当我把它放回去时,他们的评论被删除了.我也试过添加{ map: true },但是每个源映射都有这个名字to.css.map.我也试过添加from,to但我不知道如何告诉它当前的文件名,所以它总是写入相同的文件名.

我如何获得autoprefixer来合作和更新源图？我需要使用另一个插件吗？

包:

"gulp": "~3.8.6",
"gulp-autoprefixer": "~0.0.8",
"gulp-ruby-sass": "~0.7.0",

Answer 1

如果切换到,可以使用gulp-sourcemapsgulp-sass.双方gulp-sass并gulp-autoprefixer支持一饮而尽sourcemaps.

实现看起来像:

var gulp = require('gulp');
var gulpSass = require('gulp-sass');
var gulpAutoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(gulpSass())
  .pipe(gulpAutoprefixer())
  .pipe(sourcemaps.write('../maps'))
  .pipe(gulp.dest('dist'));
});

哪个会在地图目录中写入.map文件.

注意:从源.scss到目标.css的所有操作必须位于sourcemaps.init()和之间的流中sourcemaps.write().这包括任何缩小,例如gulp-uglify,也支持 gulp-sourcemaps.