0

unminify と minify の 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ファイルではなくSoure マップを取得し*.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()同じストリームで 2 回呼び出すことを妨げるものは何もありません。

.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 に答える