在同一個流中的兩個文件中寫入源地圖

Question

我有一個生成兩個CSS文件的流：unminify和minify。 我只能在縮小的文件中寫入源文件。

gulp.task('styles:foehn', ['lint-styles'], function() { 
     var processors = [ 
      require('postcss-import'), 
      require('postcss-mixins'), 
      require('postcss-each'), 
      require('postcss-for'), 
      require('postcss-simple-vars'), 
      require('postcss-custom-media'), 
      require('postcss-custom-properties'), 
      require('postcss-media-minmax'), 
      require('postcss-color-function'), 
      require('postcss-nesting'), 
      require('postcss-nested'), 
      require('postcss-custom-selectors'), 
      require('postcss-property-lookup'), 
      require('postcss-extend'), 
      require('postcss-selector-matches'), 
      require('postcss-selector-not'), 
      require('postcss-hidden'), 
      require('lost'), 
      require('postcss-calc'), 
      require('pixrem')({html: false}), 
      require('postcss-color-rgba-fallback'), 
      require('autoprefixer')({browsers: config.browsers}), 
      require('postcss-class-prefix')('vd-', { 
       ignore: [ 
        /wf-/, // ignore webfontloader classes 
        /is-/ 
       ] 
      }), 
      require('perfectionist') 
     ]; 
     return gulp.src(config.src.styles.foehn) 
      // Start sourcemaps 
      .pipe(sourcemaps.init()) 
      // We always want PostCSS to run 
      .pipe(postcss(processors)) 
      // Set the destination for the CSS file 
      .pipe(gulp.dest(config.dest + '/assets/foehn/styles')) // <--- How to write source map in this file ? 
      // Minify the styles 
      .pipe(nano()) 
      // Write sourcemaps 
      .pipe(sourcemaps.write()) // <------ source map is written in the *.min.css 
      // Rename minified styles file 
      .pipe(rename({ suffix: '.min' })) 
      // Set the destination for the CSS file 
      .pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 
      // If we are in dev, reload the browser 
      .pipe(gulpif(gutil.env.dev, reload({stream:true}))); 
    }); 

感謝您的幫助......

編輯

如果我寫

.pipe(sourcemaps.init()) 
.pipe(postcss(processors)) 
//.pipe(sourcemaps.write()) 
.pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 
.pipe(nano()) 
.pipe(rename({ suffix: '.min' })) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 

我得到的SOURE地圖在*.min.css文件，但不是在*.css文件。
但是，如果使用

.pipe(sourcemaps.init()) 
.pipe(postcss(processors)) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 
.pipe(nano()) 
.pipe(rename({ suffix: '.min' })) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 

我得到以下錯誤：

events.js:154 
     throw er; // Unhandled 'error' event 
    ^
Error: "/node_modules/normalize.css/normalize.css" is not in the SourceMap. 
    at SourceMapConsumer_sourceContentFor [as sourceContentFor] (/Users/cedricaellen/Projects/foehn/node_modules/source-map/lib/source-map-consumer.js:704:13) 
    at SourceMapGenerator.<anonymous> (/Users/cedricaellen/Projects/foehn/node_modules/source-map/lib/source-map-generator.js:235:40) 
    at Array.forEach (native) 
    at SourceMapGenerator_applySourceMap [as applySourceMap] (/Users/cedricaellen/Projects/foehn/node_modules/source-map/lib/source-map-generator.js:234:32) 
    at _class.applyPrevMaps (/Users/cedricaellen/Projects/foehn/node_modules/postcss/lib/map-generator.js:146:22) 
    at _class.generateMap (/Users/cedricaellen/Projects/foehn/node_modules/postcss/lib/map-generator.js:194:46) 
    at _class.generate (/Users/cedricaellen/Projects/foehn/node_modules/postcss/lib/map-generator.js:275:25) 
    at LazyResult.stringify (/Users/cedricaellen/Projects/foehn/node_modules/postcss/lib/lazy-result.js:226:24) 
    at /Users/cedricaellen/Projects/foehn/node_modules/postcss/lib/lazy-result.js:163:27 
    at process._tickCallback (internal/process/next_tick.js:103:7) 

Answer 1

沒有什麼阻止你在相同的流呼籲sourcemaps.write()兩次。

.pipe(sourcemaps.init()) 
.pipe(postcss(processors)) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 
.pipe(nano()) 
.pipe(rename({ suffix: '.min' })) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest(config.dest + '/assets/foehn/styles')) 

你也應該rename()後調用sourcemaps.write()。否則，該轉換不會記錄在您的源映射中，並且您在瀏覽器中檢查CSS時可能會看到錯誤的文件名。