Как правильно сжать CSS

Доброго времени суток!
На сайте стоит у меня MinifyX, и этим комбайном жму стили. Но вот беда — оказывается Microsoft Eadge отказывается воспринимать сжатый css, причем как то выборочно. Часть стилей игнорирует. Кто сталкивался с такой проблемой? Как решали? И еще… в файлах css, которые сжимает MinifyX не должно быть комментариев типа

/*Comment*/

?
Есть предположение что из-за них вся проблема.

Roman

02 ноября 2017, 14:37

2 632

Комментарии: 9

Stan Ezersky

02 ноября 2017, 21:45

Правильно использовать системы сборки и сжимать CSS и JS на стадии фронтенд-разработки.

Инструменты

Grunt
Gulp
Webpack
NPM-скрипты

Ну а если не пользуетесь, в помощь.

Николай Каленников

03 ноября 2017, 08:46

В modstore давно пометка стоит, что библиотека устарела. Сборка с autoprefixer, потом зажать в онлайн компрессоре.

Александр Мельник

03 ноября 2017, 19:38

Господа, а простите за глупый вопрос…
А зачем вообще сжимать стили на готовом проекте?
Какая вообще связь между версткой для фронтенда и разработкой на MODX.
Ну сверстали, ну сжали файл, отправили на сервер. Можно сжать при компиляции, если пользовались препроцессорами, можно плагинами в среде разработке.

Я понимаю, что это очень круто и современно, но в голове не укладывается… Нужно изучить Grunt, создавать таcки на Gulp, изучить какой-то Webpack еще желательно Node.js чтобы круто сжимать css…

Михаил

03 ноября 2017, 20:05

А чего там изучать? Gulp вообще простой.

Александр Мельник

03 ноября 2017, 21:34

Рад за Вас и очень по доброму завидую Вам, Михаил.
Для меня каждое изучение любого языка — это очень сложный этап. Это практически тоже самое, что изучить испанский. Потому что нет разницы язык речи или язык программирования — все это есть системы мышления, правила составления предложений со своим синтаксисом и лексикой.

man

03 ноября 2017, 23:26

Так это не новый язык программирования. Понять специфику работы gulp и начать применять ее на практике дело максимум одного дня…

Александр Мельник

03 ноября 2017, 23:46

Вопрос лишь в терминологии… Это уже больше философия.
Пусть это будет таск менеджер. Но если что то использует собственную лингвистику и грамматику (пусть и основанную на чем-то другом. Gulp основан на Js, но и английский язык основан на латинских и германских) то я считаю, что это — новый язык.
Да и вопрос то не о Галпе, а о том зачем он нужен при работе с MODX при сжатии таблиц стилей.
Вот честно, без иронии, я не понимаю. Ну делаем верстку, пишем CSS или LASS или SASS. Хотим сжать или скомпилировать и сжать — пользуемся визуальной Коалой. Верстка готова переходим в MODX и ведем бекенд разработку…

Илья Уткин

03 ноября 2017, 21:57

Для меня проблема, кстати, тоже актуальна. Сайты постоянно развиваются, добавляются новые блоки, меняется функционал. Если за вёрстку и бэкенд отвечает один разаботчик, то проблем нет.

Но часто бывает так, что сначала у фрилансера заказывают дизайн, потом у другого фрилансера заказывают вёрстку, а потом ты приходишь в проект, настраиваешь бэкенд и думаешь, что делать с минифицированным js или css-файлом, если надо что-то исправить или добавить…

$("#back").click(function() {
        a(), o("back")
    }), $("#next").click(function() {
        a(), o("next")
    });
    var e;
    $("#control").toggle(function() {
        a()
    }, function() {
        $(this).css({
            "background-image": "url(img/btn_pause.png)"
        }), o("next"), e = setInterval(function() {
            o("next")
        }, slideshowSpeed)
    });
    var t = 1,
        i = 0,
        n = !1,
        o = function(e) {
            if (!n) {
                if (typeof(photos) != 'undefined') {
                    "next" == e ? ++i == photos.length + 1 && (i = 1) : 0 == --i && (i = photos.length);
                    var o = t;
                    t = 1 == t ? 2 : 1, l(photos[i - 1], o, t)
                }
            }
        },
        s = -1,
        l = function(e, t, i) {
            n = !0, s--, $("#banner__img" + i).css({
                "background-image": "url(" + e.image + ")",
                display: "block",
                "z-index": s
            }), $("#banner__img" + t).fadeOut(function() {
                setTimeout(function() {
                    $("#headertxt").css({
                        display: "block"
                    }), n = !1
                }, 500)
            })
        },
        a = function() {
            $("#control").css({
                "background-image": "url(img/btn_play.png)"
            }), clearInterval(e)
        };
    o("next"), e = setInterval(function() {
        o("next")
    }, slideshowSpeed)

(это после бьютифаера — чуть проще, но разобраться в этом всё равно сложновато)