如何编写两个 CSS 文件：使用和不使用 sourcemap

Question

我需要在一个目录中有两个合并的 CSS 文件 - 一个有 sourcemap，另一个没有。例如，我尝试的是这样的：

.pipe(sourcemaps.init())
.pipe(concat('xxx.dev.min.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(cssDir))
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(concat('xxx.min.css'))
.pipe(sourcemaps.write('/dev/null', {addComment: false}))
.pipe(gulp.dest(cssDir))

我所有的尝试导致两个文件都有源映射，都没有源映射，或者一个源映射基于另一个文件，而不是原始文件。

仅使用 gulp-sourcemaps 可以实现吗？如何实现？如果不能，那么如何实现？

Answer 1

我认为以下应该可行：

gulp.task('default', function() {
  return gulp.src(['js/one.css', 'js/two.css'])
    .pipe(sourcemaps.init())
    .pipe(concat('withoutSourcemap.css'))
    .pipe(gulp.dest('dist'))
    .pipe(concat('withSourcemap.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

这会在生成源映射之前将串联的 withoutSourcemap.css 发送到目标目录。然后我们基本上只是将文件重命名为 withSourcemap.css。只有这样，源映射才会写入流并发送到目标目录。

编辑： 在我的例子中，这是生成的 withSourcemap.css：

.one { color:red; }

.two { color:blue; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9uZS5jc3MiLCJ0d28uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUNEQTtBQUNBIiwiZmlsZSI6IndpdGhTb3VyY2VtYXAuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm9uZSB7IGNvbG9yOnJlZDsgfVxuIiwiLnR3byB7IGNvbG9yOmJsdWU7IH1cbiJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ== */

Base64 解码嵌入的源地图产生以下结果：

{"version":3,"sources":["one.css","two.css"],"names":[],"mappings":"AAAA;AACA;ACDA;AACA","file":"withSourcemap.css","sourcesContent":[".one { color:red; }\n",".two { color:blue; }\n"],"sourceRoot":"/source/"}

如何编写两个 CSS 文件：使用和不使用 sourcemap

How to write two CSS files: with and without sourcemap

css

automation

sass

gulp

source-maps