CSS Sourcemaps 无法使用 gulp、SASS 和 autoprefixer 正确生成

Posted 2023-02-16

【中文标题】CSS Sourcemaps 无法使用 gulp、SASS 和 autoprefixer 正确生成

【英文标题】：CSS Sourcemaps not generating properly with gulp, SASS, & autoprefixer

【发布时间】：2014-09-18 00:07:01

【问题描述】：

我有以下 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 并且效果很好，但是当我将其放回原处时，他们的评论被删除了。我还尝试添加 map: true ，但随后每个源映射都只有名称to.css.map。我还尝试添加from 和to，但我不知道如何告诉它当前的文件名，所以它总是写入相同的文件名。

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

包：

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

【问题讨论】：

autoprefixer 的README.md 表示可以handle sourcemaps。它可能为此使用postcss。

问题是它似乎删除它们或没有正确更新它们。

我遇到了同样的问题。我为此创建了一个 GitHub 问题：github.com/sindresorhus/gulp-autoprefixer/issues/1

【参考方案1】：

我已经为enable source map support for autoprefixer with gulp 创建了一个小的 gulp 插件：

var through = require('through2');
var prefix = require('autoprefixer');
var applySourceMap = require('vinyl-sourcemaps-apply');

module.exports = function(browsers, options) 

  options = options || ;

  return through.obj(function(file, enc, cb) 

    if(file.isStream()) 
      throw new Error('Streams not supported');
    

    if(!file.isNull()) 

      if(file.sourceMap) 
        options.map = 
          annotation: false
        ;
        options.to = options.from = file.relative;
      

      var contents = file.contents.toString();

      var result = prefix(browsers).process(contents, options);
      contents = result.css;

      file.contents = new Buffer(contents);

      if(file.sourceMap) 
        applySourceMap(file, result.map.toString());
      
    

    this.push(file);
    cb();

  );

;

它使用了gulp-sourcemaps，所以任何支持gulp-sourcemaps的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，但也许有人可以使用上述内容来破解插件并更新此答案。

【讨论】：

这很接近，但连接是由 SASS 完成的（因为它使用 @import 语句）。

【参考方案2】：

如果你切换到gulp-sass，你可以使用gulp-sourcemaps。 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'));
);

这会将 .map 文件写入 maps 目录。

注意：从源 .scss 到目标 .css 的所有操作都必须在 sourcemaps.init() 和 sourcemaps.write() 之间的流中。这包括任何缩小，例如gulp-uglify，也包括supportsgulp-sourcemaps。

【讨论】：

感谢您记录这一点。看起来 autoprefixer 和 SASS 现在都完全支持源映射，所以一切正常！

@linuxdan - 你让我免于在周一早上打开一瓶威士忌。我一直在尝试缩小为什么包含/排除注释块会导致完全破坏映射/正确映射的原因。答案 === 附加一个合法的标题注释块“必须在 sourcemaps.init() 和 sourcemaps.write() 之间的流中”