C
C
chegcheg2021-08-12 19:31:23
Sass
chegcheg, 2021-08-12 19:31:23

How to format css after executing gulp-group-css-media-queries?

gulpfile.js has this task:

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());
}

It copes with the assigned functions almost as it should:

  1. compiles scss to css ( scss());
  2. puts prefixes ( autoprefixer());
  3. groups media queries ( group_media());
  4. places the file in /build/css/( dest());
  5. minify css( clean_css());
  6. renames the new file to *.min.css ( rename());
  7. places the file in /build/css/( dest()).

As a result, we get 2 versions of css:
  • style.css with readable code
  • minified style.min.css

The only problem is that after executing the group_media()css is formatted with default settings css-stringify(run in gulp-group-css-media-queries), overwriting those specified in scss(), in particular indent. gulp-group-css-media-queriesIt cannot take any parameters itself .

I tried between group_media()and dest()additionally clean_css()with the necessary settings, but I get an error:

Error: Ignoring local @ import of "#src/scss/style.css" as resource is missing.

exactly STYLE.CSS

How can I solve the problem with formatting without using additional plugins likegulp-cssbeautify?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question