For CSS processing I use gulp with autoprefixer and doIuse. It was necessary to add a third-party file to the styles, so that it was included without changes. But in the end, all styles had to be packaged into one style.css file, and sourcemaps were created for them.

I did this:

gulp.task('css', function() { var plugins = getPlugins(); var processors = [ plugins.precss, plugins.autoprefixer, plugins.doiuse ]; // мой css, должен пройти через autoprefixer var my_css = gulp.src([ ... my css files ... ]) .pipe(plugins.sourcemaps.init()) .pipe(plugins.postcss(processors)) ; // сторонний css, должен остаться как есть, но нужны sourcemaps var third_party = gulp.src([ ... third party css files ... ]) .pipe(plugins.sourcemaps.init()) ; return plugins.merge2(third_party, my_css) .pipe(plugins.concat('style.css')) .pipe(plugins.sourcemaps.write('./')) .pipe(gulp.dest('web/css')) ; });

I wasn't sure what would work, but it worked. However, I still do not understand exactly how it works? Why are sourcemaps properly created after merge and concat?

I would like to understand how the merging of threads in gulp works.

    0