Разделить основные стили и media по разным файлам

Question

Хочу писать @media в less файлах для каждого блока, на данный момент less файлы собираются в main.css, но я хочу что бы @media при сборке все соединялись по значению, например все @media (min-width: 1024px) и в них все стили для этого media из всех файлов и т.д. для каждого media одинакового, тут мне подошел плагин gulp-group-css-media-queries, он все отлично обьединяет и ставит в конце файла, но что я сделать не понимаю как, вырезать эти все @media в отдельный файл responsive.css и что бы на выходе я получил main.css и responsive.css.

На данный момент сборка less выглядит вот так:

function stylesdev() {
    return gulp.src(path.src.less)
        .pipe(less({ plugins: [autoprefixPlugin] }).on('error', function (error) {
            console.log(error)
        }))
        .pipe(gcmq())
        .pipe(gulp.dest(path.build.css))
        .pipe(browserSync.stream())
        .pipe(touch());
}

Answer 1

Существует решение на основе postcss плагина, который вытаскивает mq выражения в другой файл.

Имя ему PostCSS Filter Media Queries

Поставляется пакетом postcss-filter-mq

Установить npm install --save-dev gulp-postcss postcss-filter-mq

Простейший пример. На выходе будет output.css где содержаться только mq запросы.

var gulp = require("gulp"),
    rename = require("gulp-rename"),
    postcss = require("gulp-postcss"),
    filtermq = require("postcss-filter-mq");

gulp.task( "css:mq", function () {

    gulp.src("src/input.css")
        .pipe( postcss([ filtermq ]) )
        .pipe( rename( "output.css" ) )
        .pipe( gulp.dest("dist/") );

});

Простенькая документация с примерами.

БЛОГ НА HUSL

Разделить основные стили и media по разным файлам

Ответы (1 шт):