gulp ruby​​ sass 和 concat 将我的源图放入 css

Question

我正在使用event-stream，以便在一项任务中编译 SASS 并将其与 CSS 合并。效果很好，我唯一的问题是 sourcemap 正在合并到 CSS 中。

gulp 代码

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));
});

来源：ma​​in.SCSS

header {
  padding: 2px;
}

来源：ma​​in2.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) 试过： 将 ruby​​Sass 的 sourcemap 设置为 false 结果： 没有区别

.pipe(plugins.rubySass({
    style: 'expanded', sourcemap: 'none', precision: 2
}));

1. 试过： gulp-concat-sourcemap，这会创建我的外部源映射文件，但我的style.min.css 中仍然有它

   return 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))

"))

Answer 1

不久前我遇到了同样的问题。这与如何使用 dargs 将参数传递给 sass gem 有关，您可以找到更多关于它的信息here。

自从#114 之后，这应该可以工作。

@milesj 给出了一个小技巧，现在解决这个问题：

.pipe(plugins.rubySass({
  style: 'expanded', 'sourcemap=none': true, precision: 2
}));