I've got a stream that generate two CSS files: An unminify and an minify one. I'm only able to write the source file in the minified one.
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})) );
});
thanks for your help...
edit
If I wrote
.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'))
I get the Soure Map in the *.min.css files but not in the *.css files.
But if I use
.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'))
I get the following error:
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)
