同じストリーム内の2つのファイルにソースマップを書き込みます。

Question

2つのCSSファイルを生成するストリームがあります。 私は、縮小されたソースファイルのみを書き込むことができます。あなたの助けのための

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

を書いた場合、私は*.min.cssファイルではなく*.cssファイルにSoure地図を取得

編集

。
しかし、私は

.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を検査するときに間違ったファイル名が表示されることがあります。