gulp-group-css-media-queries ломает форматирование css
В gulpfile.js имеется такая задача:
let { src, dest } = require('gulp'),
gulp = require('gulp'),
browsersync = require('browser-sync').create(),
scss = require('gulp-sass')(require('sass')),
autoprefixer = require('gulp-autoprefixer'),
group_media = require('gulp-group-css-media-queries'),
rename = require('gulp-rename'),
clean_css = require('gulp-clean-css');
function css() {
return src('./#src/scss/style.scss')
.pipe(
scss({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: 1
})
.on('error', scss.logError)
)
.pipe(
autoprefixer({
overrideBrowserslist: ['last 2 versions'],
cascade: false
})
)
.pipe(group_media())
.pipe(dest('./build/css/'))
.pipe(clean_css())
.pipe(rename({
extname: '.min.css'
}))
.pipe(dest('./build/css/'))
.pipe(browsersync.stream());
}
С назначенными функциями справляется практически как нужно:
- компилирует scss в css (
scss()); - ставит префиксы (
autoprefixer()); - группирует @media (
group_media()); - помещает файл в
/build/css/(dest()); - минифицирует css (
clean_css()); - переименовывает новый файл в *.min.css (
rename()); - помещает файл в
/build/css/(dest()).
На выходе получаем 2 версии css:
style.cssс читабельным код- минифицированный
style.min.css
Единственная проблема в том, что после выполнения group_media() css форматируется с дефолтнымы настройками css-stringify (выполняется в gulp-group-css-media-queries), переписывая те, что указаны в scss(), в частности indent.
Сам gulp-group-css-media-queries не может принимать никаких параметров.
Пробовал между group_media() и dest() дополнительно использовать clean_css() с необходимыми настройками, но получаю ошибку:
Error: Ignoring local @import of "#src/scss/style.css" as resource is missing.
именно STYLE.CSS
Как можно решить проблему с форматированием без использования дополнительных плагинов типа gulp-cssbeautify?