Сжатие и упорядочивание css

263

28 февраля 2017, 16:42

имеется файл bootstrap.css у которого объем эээ 4 мб, создатель переборщил явно и сайт просто мертв. Я взялся оптимизировать сайт и вот проблемка:

Я очистил с помощью расширений dust me и custom css (Firefox) неиспользуемый css вроде дубликаты остались, но самое главное в файле есть вида

@media (max-width: 400px){
.big-quest {display:none;}
}
@media (max-width: 400px){
.big-quest .pre {color:black;}
}
...............
@media (max-width: 400px){
.ingo div {color:black;}
}

Cобственно чем их можно объединить эти media в один поток, вот так (сейчас файл 1 мб):

@media (max-width: 400px){
.big-quest {display:none;}
.big-quest .pre {color:black;}
.ingo div {color:black;}
}

Answer 1

Как вариант, можно использовать модуль node-css-mqpacker.

Утилиту можно использовать из консоли (терминала).

Answer 2

Кроме обычной минификации стилей можно использовать и продвинутую - объединять дубликаты классов и @media. Пример на gulp:

var
    gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    // Минифицирует CSS, объединяет классы. Не ломает CSS, в отличие от cssnano, который, к примеру, может неправильно выставлять z-index
    csso = require('gulp-csso'),
    // Объединяет все @media
    cmq = require('gulp-group-css-media-queries'),
    // Сокращает 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/'))
});

А если совсем делать нечего, то можно еще и селекторы сократить:

// 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/'))
    });

Кстати, наверняка у вас есть классы, добавляющиеся через JS, поэтому предварительно стоит все такие классы вынести в переменную ignores.