0

我有一个生成两个 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 Map，*.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)
4

1 回答 1

0

没有什么可以阻止您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 时可能会看到错误的文件名。

于 2016-07-07T15:49:08.783 回答