Я использую сетку 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}))
});
gulp-csso
, плагин от яндекса, отлично жмет и объединяет селекторы.... Но есть как всегда НО , у него нет настроек на то что бы не сжимать выходной файл, по крайней мере я не нашел. Для продакшен версии самое оно, а вот для девелоп селекторы так и остаются раздробленными. Остаюсь в поисках.