让gulp-sass与clean-css一起工作

时间:2014-12-23 16:04:18

标签: gulp minify source-maps gulp-sass node-sass

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

我目前的gulp任务是:

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)处的断言),则生成源映射但是它不能识别原始文件(IE是gulp-sass编译的scss文件)而是我的所有文件源被映射到“ stdin ”虚拟文件。

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

0 个答案:

没有答案