gulp-sass同时生成两个sourcemaps文件

参考文章:

https://stackoverflow.com/questions/35140318/two-sass-sourcemaps-in-one-gulp-stream

https://github.com/ben-eb/gulp-cssnano/issues/21

解决思路是clone出来两个pipe,一个pipe生成没有mini化的css的sourcemaps,零一个pipe生成mini化的css的sourcemaps,然后将两个sourcemaps合并成一个

我的代码:

gulp.task("sass:" + modelName, function(){
var dist = dirs.dist + "/assets/" + modelName + "/";
var source = gulp.src(dirs.src + "/assets/" + modelName + "/**/*.scss")
.pipe(plugins.plumber())
.pipe(plugins.sourcemaps.init());

var pipe1 = source.pipe(plugins.clone())
.pipe(plugins.sass({outputStyle: "expanded"}))
.pipe(plugins.autoprefixer(prefixConfig))
.pipe(plugins.cssbeautify())
.pipe(plugins.sourcemaps.write("./"))
.pipe(gulp.dest(dist))
;
var pipe2 = source.pipe(plugins.clone())
.pipe(plugins.rename({suffix: ".min"}))
.pipe(plugins.sass({outputStyle: "compressed"}))
.pipe(plugins.autoprefixer(prefixConfig))
.pipe(plugins.sourcemaps.write("./"))
.pipe(gulp.dest(dist))
;

return merge(pipe1, pipe2);
});

和参考文章里面的代码不一样,根据参考文件里面的代码生成的sourcemaps有问题,参考文章里面的是在主pipe里面处理sass,然后在clone出来的pipe里面sourcemaps.write,最后导致第二个clone出来的sourcemaps是第一个css文件的。

在我的方案里面,两个clone出来的pipe独立处理sass,缺点就是,性能有些问题