在同一个流中的两个文件中写入源地图

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时可能会看到错误的文件名。