Группировка css-селекторов Gulp

969

18 февраля 2017, 06:42

Я использую сетку smart-grid и group-css-media-queries. Всё группируется по медиа-запросам, всё хорошо, но на выходе есть одна проблема (её масштаб зависит от количества файлов).

Проблема заключается в следующем: Gulp собирает все медиа-запросы в один, но мне нужно, чтобы он объединял идентичные селекторы в один.

Например:

.logo {min-height: 100px;}
.logo {color: white;}
.logo {border: 1px solid black;}
.pointer {cursor: pointer;}
.pointer {margin: 5px;}

Нужно объединить в:

.logo {min-height: 100px;color: white;border: 1px solid black;}
.pointer {cursor: pointer;margin: 5px;}

Какой есть плагин, чтобы объединять все идентичные селекторы в один? Т. е. чтобы .logo и .pointer содержали в себе всю информацию, а не разбивались на 2-3 селектора?

Код gulpfile.js:

gulp.task('less', function() {
    return gulp.src('build/less/*.less')
    .pipe(less()) 
    .pipe(plumber())
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) //Включаем автопрефиксы
    .pipe(gcmq()) //Группируем медиазапросы
    .pipe(sourcemaps.init())
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('project/css')) 
    .pipe(browserSync.reload({stream: true}))
});

Answer 1

gulp-clean-css https://www.npmjs.com/package/gulp-clean-css

Это враппер для проекта https://github.com/jakubpawlowicz/clean-css

Там вся документация. Имеет много настроек, включая требуемый вам функционал. Конкретно группировка классов происходит в опции:

level: 2

Answer 2

Как насчет предварительно оптимизировать CSS, а потом применять уже к нему group-css-media-queries? Таск будет выглядеть примерно так:

var gulp = require('gulp'),
    gcmq = require('gulp-group-css-media-queries'),
    cssnano = require('gulp-cssnano');
gulp.task('style', function() {
  return gulp.src('src/styles/style.css')
    .pipe(cssnano({
      discardUnused: false
    }))
    .pipe(gcmq())
    .pipe(gulp.dest('dist'));
});

Ну а если не сработает, то еще можно попробовать переставить вызов плагинов местами вот так:

.pipe(gcmq())
.pipe(cssnano())

Answer 3

У меня, к примеру, используется такая комбинация:

var
    gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    // Минифицирует CSS, объединяет классы. Не ломает CSS, в отличие от cssnano, который, к примеру, может неправильно выставлять z-index
    csso = require('gulp-csso'),
    // Объединяет все @media
    cmq = require('gulp-combine-mq'),
    // Сокращает CSS-селекторы    
    gs = require('gulp-selectors'),
    // Проставляет вендорные префиксы
    autoprefixer = require('gulp-autoprefixer'),
    livereload = require('gulp-livereload'),
    nib = require('nib');
// Compiling Stylus in CSS
gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(cmq())
        .pipe(csso())
        .pipe(autoprefixer('last 3 versions'))
        .pipe(gulp.dest('./public/css/'))
        .pipe(livereload())
});
// Minify selectors
gulp.task('gs', function() {
    var ignores = {
        classes: ['active', 'menu', 'nav', 'slide', 'error', 'form-control', 'loader', 'showLoader', 'fadeLoader', 'webp', 'wow', 'owl-*', 'i-*'],
        ids: '*'
    };
    gulp.src(['./public/**/*.css', './public/**/*.html'])
        .pipe(gs.run({}, ignores))
        .pipe(gulp.dest('./public/'))
});