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文件中获取了Soure Map，但在*.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'))

此外，您应在sourcemaps.write()之后致电rename()。否则，转换不会记录在源映射中，并且在浏览器中检查CSS时可能会看到错误的文件名。

将源映射写入同一流中的两个文件中

1 个答案: