CSS Sourcemaps无法正确生成gulp、SASS和；自动刷新器

我有以下任务：

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编译器正确地生成了sourcemaps并添加了sourcemap注释，但随后autoprefixer删除了注释（我认为它也没有更新sourcemaps）

我试过删除AutoRefixer，它工作得很好，但当我把它放回去时，他们的评论被删除了。我还尝试添加

{map:true}

，但是每个sourcemap的名称都是

to.css.map

。我还尝试将

从

和

添加到

中，但我不知道如何告诉它当前文件名，以便它总是写入相同的文件名

如何让AutoRefixer合作并更新源地图？我还需要使用其他插件吗

套餐：

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

---

我已经创建了一个小的gulp插件：

它正在利用，因此任何支持

gulpsourcemaps

的gulp插件都可以在流管道中使用：

var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat'); // Supports gulp-sourcemaps
var prefixer = require('./gulp-autoprefixer-map.js');

gulp.task('css', [], function() {
  gulp.src('src/**/*.css')
   .pipe(sourcemaps.init())
   .pipe(concat('app.css'))
   .pipe(prefixer())
   .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest('dest/'))
});

不幸的是，目前还没有对SASS的支持，但是也许有人可以使用上面的方法一起破解一个插件并更新这个答案。

如果您切换到

gulp SASS

，您可以使用它。

gulp sass

和

gulp autoprefixer

都支持gulp源地图

实现将类似于：

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

它将在maps目录中写入.map文件

---

注意：从source.scs到target.css的所有操作必须在

sourcemaps.init（）

和

sourcemaps.write（）之间的流中。这包括任何缩小，如
gulp uglify
，也包括
gulp sourcemaps
 
autoprefixer
的
README.md
说它可以。它可能用于此。问题是它似乎删除了它们或没有正确更新它们。我遇到了相同的问题。我为此创建了一个GitHub问题：这很接近，但是连接是由SASS完成的（因为它使用@import语句）。感谢您的文档记录。看起来AutoRefixer和SASS现在都完全支持sourcemaps，所以一切都正常工作@你刚刚救了我，让我不用在星期一早上打开一瓶威士忌。我一直在努力缩小注释块被包含/排除会导致完全破坏映射/正确映射的原因。答案===追加合法标题注释块“必须在sourcemaps.init（）和sourcemaps.write（）之间的流中”
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'));
});