В 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
?