Как делают супер-пупер сжатие HTML/CSS кода?

Question

[Dmitry Katyushin]

Недавно стало очень интересно, как делают такой код:

<li class="iukp14 _eV kno-fb-ctx img-kc-m bili uh_r rg_el" style="width:151px" data-ved="0CHQQ-x0oADAO"><div style="height:151px;width:151px" class="bicc"><a class="bia uh_rl" href="/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=15&amp;cad=rja&amp;uact=8&amp;ved=0CHUQ_B0wDg&amp;url=https%3A%2F%2Fplus.google.com%2Fu%2F0%2F116899029375914044550&amp;ei=yIaCVciqL8y9Ufeyg5gH&amp;usg=AFQjCNF0JbMeF9yxqTTcAwzkFgQ8uzIKgA&amp;sig2=_KCQF1dLqRs6Ph4jKHDg7g&amp;bvm=bv.96041959,d.d24" id="4DBV4mzkv25nWM:" role="link" style="height:151px;margin-left:0px;margin-right:0px;margin-top:0px;width:151px" tag="bia" tabindex="0" jsaction="fire.ir_hc" onmousedown="return rwt(this,'','','','15','AFQjCNF0JbMeF9yxqTTcAwzkFgQ8uzIKgA','_KCQF1dLqRs6Ph4jKHDg7g','0CHUQ_B0wDg','','',event)" target="_blank" data-href="https://plus.google.com/u/0/116899029375914044550">

Пример взял прямиком с гугла. Понятно дело, что вручную такие классы никто не будет прописывать, значит этот делает какая-то штука. А может это способ организации кода такой, очень похоже на Atomic CSS. Где-то полгода назад видел что-то про такую оптимизацию на хабре, но сейчас уже и не вспомню. Мб есть у Gulpa такой плагин, который все переименовывает в более короткие названия, при этом не забывает про css (где он должен дать в точности тоже самое название). Написал неочень красиво, но думаю понятно. Заранее благодарю за ответы.

UPD.: Что-то похожее используется у fb, вот например классы одной из кнопок:

<button value="1" class="_42ft _4jy0 _4jy3 _517h _51sy" type="submit"><i class="_3-8_ img sp_ix95biPEpOf sx_7a0a78"></i>Добавить в друзья</button>

Comments

[Dmitry Katyushin]

Владислав Турчинский: верно, в таких проектах очень важна оптимизация, даже если речь идет о 10-50кб, кстати было бы интересно узнать, сколько они на этом Кб выкинули

Answer 1

[Виктор Виктор]

Есть такой GRUNT плагин

compressing-class-names-and-ids-in-html-with-grunt

Comments

[Dmitry Katyushin]

мм реально то что надо, но неужели нету для Gulpa? Не хочется из-за одной плюшки переходить на Grunt

[Виктор Виктор]

https://www.npmjs.com/package/gulp-selectors может он?

[Dmitry Katyushin]

Виктор Виктор: супер, то что надо, осталось испытать в действии, спасибо

[Саша]

Возникает ошибка

Грант ссылается на неверное имя плагина, или в чем проблема?

[Виктор Виктор]

ага, нужно его в кавычки взять, javascript же

[Саша]

Виктор Виктор: В какие кавычки? Это же название плагина, оно не берется в кавычки.

[Саша]

Виктор Виктор: или я чего то не вижу

[Виктор Виктор]

Это костыль, потому что автор неправильно назвал таск:

```javascript
grunt.initConfig({
'class-id-minifier': {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
```

[Саша]

Виктор Виктор: тоже так думаю, что где то промах.
Не работает с кавычками

[Виктор Виктор]

у меня сработало

[Саша]

Виктор Виктор:

[Саша]

Виктор Виктор: есть еще идеи?

[Саша]

Виктор Виктор: скинь пожалуйста код всего Grantfile.js , если не трудно на jsfiddle

[Виктор Виктор]

а дай посмотреть грантфайл

[Виктор Виктор]

у меня такая таска была

'class-id-minifier': {
simple: {
options: {
jsMapFile: 'tmp/simple/map.js',
jsMapDevFile: 'tmp/simple/map.dev.js',
minifyFilter: function (k, type) {
// type.id type.className
// J_ ignored in minified html
return /^J_/.test(k) ? false : true;

},
jsMapFilter: function (k, type) {
// className ignored in js map
return !!type.id;
}
},
files: [
{
expand: true,
cwd: '.',
src: './**/*.{html,css}',
dest: 'tmp/'
}
]
}
},

+ grunt.loadNpmTasks('grunt-class-id-minifier');

[Виктор Виктор]

может дело в cwd
я обычно его делаю = '.', а каталоги какраз указываю в src

[Саша]

Виктор Виктор: Залил

[Саша]

Виктор Виктор: обновил

[Виктор Виктор]

userAlexander: Если я делаю cwd массивом как у тебя начинает ругатся

Running "class-id-minifier:simple" (class-id-minifier) task
Warning: Arguments to path.resolve must be strings Use --force to continue.

Сделай вместо cwd: ['../css/', '../'] -> cwd: '../',

а вместо src: '*.{html,css}', -> src: ['*.html', '../css/*.css'],

[Виктор Виктор]

Типа того jsfiddle.net/51ff62ht/2

[Саша]

Виктор Виктор: да, ошибки уже нет, теперь осталось подкорректировать пути.
Спасибо!)

[Саша]

Виктор Виктор: только теперь другой момент.
Сейчас плагин генерирует html файлы, с измененными классами, как сделать, чтобы генерировал так же css и js файлы, с новыми классами?

[Виктор Виктор]

userAlexander: возможно так:
src: ['*.html', 'css/*.css', 'js/*.js'],

[Виктор Виктор]

Не, скрипты он не меняет

https://github.com/yiminghe/grunt-class-id-minifier
>> files
>> files of html and css files to be minified

[Виктор Виктор]

решение такое

для свези с javascript на элемент добавлять класс с префиксом 'js-'

- сразу ясно что за что отвечает и при прогоне через плагин классы button и red-button заменятся, а js-show-popup отанется. Потому что плагин меняет те классы которые встречает и в цсс и в хтмл, если класс с префиксом 'js-' в стилях не учавствует то он и не поменяется

[Саша]

Виктор Виктор: Кстати да, так и сделал, как в примере выше (подкорректировал пути)
результат .
Если этот плагин не конвертирует js, получается, что в 95% случаев он бесполезен.

[Виктор Виктор]

парсер скушал =)

button class="button red-button js-show-popup"

[Саша]

вопрос только зачем было указывать на оффсайте в дэфолтных настройках плагина эти строки

[Виктор Виктор]

userAlexander: так это же мап файлы, они генерятся и в них что на что заменяно:

LASS_ID_MAP = {
"id_header_search": "a",
"id_geo": "b",
"map-canvas": "bz",
"id_city": "cq",
"id_activity_kind": "cr",
"slider-template": "de",
"feedback-form": "es",
"id_name_explanation": "et",
"id_name": "eu",
"id_email_explanation": "ev",
"id_email": "ew",
"id_message_explanation": "ex",
"id_message": "ey",
"id_captcha_1_explanation": "ez",
"id_captcha_0": "fa",
"id_captcha_1": "fb",
"popup-template": "jx",
"id_all": "ld",
"id_green": "le",
"id_body_search": "md",
"checkbox-1": "me",
"checkbox-2": "mf",
"checkbox-3": "mg",
"checkbox-4": "mh",
"city": "nq",
"metro": "nr",
"address": "ns"
};

[Саша]

Виктор Виктор: открывал, смотрел, теперь ясно, что там за инфа.
Не интересовались поиском альтернативного плагина, только с возможностью обработки и js так же ?

[Виктор Виктор]

Если классы для скриптов существуют отдельно от стилевых, как я писал выше, то в подобном функционале нет нужды.

[Саша]

Виктор Виктор: В смысле с префиксом? js-

[Саша]

Виктор Виктор: Все равно конвертирует классы с префиксом, при чем в html файле конвертирует, а css нет.
js-nav-button
js-button
js-btn

[Виктор Виктор]

а там нужно фильтр поправить c "J_" на "js-"

minifyFilter: function (k, type) {
// type.id type.className
// J_ ignored in minified html
return /^js-/.test(k) ? false : true;

}

[Виктор Виктор]

также можно добавить туда несколько правил, да всяких is-, has-

[Саша]

Виктор Виктор: спасибо, очень помогло!))

[Саша]

Виктор Виктор: не фрилансите? Ищу напарника.

[Виктор Виктор]

userAlexander: нет, работаю

Answer 2

[ummahusla]

Что за извращение. Inline-css, херова туча классов, кторые не чем не лучше чем inline-css, про SASS и @extend люди видимо не слышали.

Сжатие HTML делают путём использование gzipa на сервере.

Comments

[Dmitry Katyushin]

Ну.. такая структура, мне нравится, когда накидывают классы, а не прописывают кучу строк каждому элементу, поэтому тут очень важна длина классов, что они и укорачивают

[Евгений Петров]

Херова туча классов намного лучше, чем перечисление херовой кучи мегаклассов в CSS.

[Dmitry Katyushin]

Евгений Петров: я тоже так думаю + структура симпатичнее как по мне, но это уже на любителя

[Евгений Петров]

Особенно смешно слышать такие замечания от человека, спокойно использующего атрибуты событий и навешивающего обработчики всплывающих событий непосредственно на элементы, используя траверс.