6

我有以下吞咽任务：

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",
4

2 回答 2

7

如果您切换到gulp-sass. 两者都gulp-sass支持gulp-autoprefixergulp 源映射。

实现看起来像：

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.

于 2015-08-18T00:11:32.133 回答
0

我创建了一个小型 gulp 插件，以启用对带有 gulp 的 autoprefixer 的源映射支持：

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 插件gulp-sourcemaps都可以在流管道中使用：

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，但也许有人可以使用上面的方法来破解插件并更新此答案。

于 2014-08-12T09:45:48.113 回答