如何編寫兩個CSS文件：帶和不帶源代碼

我需要在一個目錄中有兩個合併的CSS文件 - 一個帶有sourcemap，另一個沒有。我試過的例子是這樣的：如何編寫兩個CSS文件：帶和不帶源代碼

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

我所有的努力造成具有或者兩個文件sourcemap，既沒有一個sourcemap或者具有sourcemap基於另一個，而不是原始文件。

這可以通過只有gulp-sourcemaps來實現，以及如何，如果沒有，那麼如何？

來源

2016-04-01 bogatyrjov

我認爲有以下應該工作：

已生成的源映射之前，這發出級聯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/"}

來源

2016-04-01 09:59:18

不錯的嘗試，但這樣可能造成sourcemapin withSourcemap.js基於withoutSourcemap.js，不基於js/one.js和js/two.js，因爲這兩個文件已經合併在流中:)我實際上已經將它設置爲這樣，並認爲它也可以工作。 – bogatyrjov

咦？生成的源地圖有''sources「：[」one.css「，」two.css「]'not'」sources「：[」withoutSourcemap.css「]（參見上面的編輯），這應該表示它是基於'one.css'和'two.css'而不是'withoutSourcemap.css'。除非我誤解了一些東西。 –

它運行得很好，我的不好。以前我錯了。謝謝 ;） – bogatyrjov

如何編寫兩個CSS文件：帶和不帶源代碼

回答

相關問題