参考文章:
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,缺点就是,性能有些问题