1

我正在尝试使用 clean-css 缩小 scss 文件并获得有用的 sourceMap 文件。

我目前的吞咽任务是：

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    through = require('through2');
    CleanCSS = require('clean-css'),
    applySourceMap = require('vinyl-sourcemaps-apply');

var minify = through.obj(
    function minify(file,encoding,callback) {
        // do normal plugin logic
        var result = new CleanCSS({sourceMap:file.sourceMap
            ,target: "./src"}).minify(file.contents.toString());
        console.log(file.sourceMap)
        file.contents = new Buffer(result.styles);

        // apply source map to the chain
        if (file.sourceMap) {
            applySourceMap(file, result.sourceMap.toString());
        }
        this.push(file);
        callback();
    }
);

gulp.task('style', [],function () {
  return gulp.src('./myfile.scss',{cwd: 'src'})
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(minify)
    .pipe(sourcemaps.write('../maps/style',{sourceRoot:'/source/src'}))
    .pipe(gulp.dest('./build/style/'))

});

当我运行此设置时，我收到以下错误：

Error: Source map to be applied is missing the "file" property
  at assertProperty (node_modules/vinyl-sourcemaps-apply/index.js:32:13)
  at applySourceMap (node_modules/vinyl-sourcemaps-apply/index.js:11:3)
  at DestroyableTransform.minify [as _transform] (/gulp/tasks/style.js:21:4)
  at DestroyableTransform.Transform._read (/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
  at DestroyableTransform.Transform._write (/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
  at doWrite (/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
  at writeOrBuffer (/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
  at DestroyableTransform.Writable.write (/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
  at Stream.ondata (stream.js:51:26)
  at Stream.emit (events.js:95:17)
  at queueData (/node_modules/gulp-sass/node_modules/map-stream/index.js:43:21)
  at next (/node_modules/gulp-sass/node_modules/map-stream/index.js:71:7)
  at /node_modules/gulp-sass/node_modules/map-stream/index.js:85:7
  at handleOutput (/node_modules/gulp-sass/index.js:100:3)
  at opts.success (/node_modules/gulp-sass/index.js:63:7)
  at options.success (/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:164:7)

如果我添加一个虚拟文件路径（或删除 处的断言node_modules/vinyl-sourcemaps-apply/index.js:32:13)），则会生成源映射，但是它无法识别原始文件（即 gulp-sass 编译的 scss 文件），而是将我的所有源映射到“ stdin ”虚拟文件。

如何clean-css识别由 处理的映射源的位置gulp-sass？

4

0 回答 0