css - 如何写两个CSS文件 : with and without 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/"}