동일한 스트림의 두 파일에 소스 맵을 작성하십시오.

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

내가 *.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')) 

를 사용하는 경우
는하지만 다음과 같은 오류가 발생합니다 :

같은 스트림에 두 번 sourcemaps.write() 전화에서 당신을 방지 거기에 아무것도

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

.

.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를 검사 할 때 잘못된 파일 이름이 표시 될 수 있습니다.