我正在使用event-stream
以便我可以编译SASS并在一个任务中将其与CSS合并。它工作得很好我唯一的问题是sourcemap
正在CSS中合并。
gulp code
gulp.task('css', function(){
var sassGlob = "assets/css/**/*.scss";
var cssGlob = "assets/css/**/*.css";;
var dest = "./dist/css/min/'";
// compile sass
var sassFiles = gulp.src(sassGlob)
.pipe(plugins.rubySass({
style: 'expanded', precision: 2
}));
// concatenate css + compiled sass
return es.concat(gulp.src(cssGlob), sassFiles)
.pipe(plugins.concat('style.min.css'))
.pipe(gulp.dest(paths.styles.dest));
});
来源: main.SCSS
header {
padding: 2px;
}
来源: main2.css
body {
padding: 2px;
}
输出: style.min.css
body {
padding: 2px;
}
header {
padding: 2px;
}
/*# sourceMappingURL=main.css.map */
{
"version": 3,
"mappings": "AAAA,IAAK;EACD,OAAO,EAAE,GAAG",
"sources": ["../main.scss"],
"names": [],
"file": "main.css"
}
我尝试过的事情
1)试过:将rubySass的sourcemap设置为false 结果:没有区别
.pipe(plugins.rubySass({
style: 'expanded', sourcemap: 'none', precision: 2
}));
试过: gulp-concat-sourcemap
,这会创建我的外部源图文件,但我仍然在我的style.min.css
返回es.concatSourceMap(gulp.src(cssGlob),sassFiles) .pipe(plugins.concat( 'style.min.css')) .pipe(gulp.dest(paths.styles.dest));
当我检查生成的源图的输出时,我注意到了这个
{
"version": 3,
"file": "style.min.css",
"sources": [
"assets/css/other.css",
"main2.css",
"main2.css.map"
],
"names": [],
"mappings": "AAAA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;;ACLA;AACA;AACA;AACA;AACA;AACA;AACA"
}
基于它,似乎它将.map文件连接到CSS,这是我们看到的行为。 所以我试着过滤掉它。
3)尝试:使用gulp-filter
过滤出地图文件,使其不会在css 结果中连接:没有区别
return es.merge(cssFiles, sassFiles)
.pipe($.filter("!*.map))
“))