Перед развертыванием есть ли инструмент для сжатия атрибутов класса HTML и селекторов CSS?

Question

В текущем проекте меня попросили сжать атрибут класса HTML и соответствующие селекторы CSS перед развертыванием .Например, код на производстве: :

<div class="foo">
  <div id="bar"></div>
</div>

.foo {/*Style goes here*/}
#bar {/*Style goes here*/}

При развертывании , я хочу заменить класс HTML и соответствующие селекторы CSS:

<div class="a">
  <div id="b"></div>
</div>

.a {/*Style goes here*/}
#b {/*Style goes here*/}

Какие инструменты доступны для архивирования этого сжатия?

Answer 1

Если вы действительно хотите переименовать имена классов (помните, что сказал Мадмартиган), то Google Closure Stylesheets делает это. Это избыточное решение, и YUI Compressor или любой другой инструмент минификации + gzipping должен дать вам прирост производительности, но он может это сделать. Вам нужно будет использовать другие инструменты закрытия, чтобы внести соответствующие изменения в ваши .js файлы и HTML-шаблоны.

Answer 2

Существует также проект под названием "rename-css-selectors", если вы обрабатываете код с помощью узла:

https://www.npmjs.com/package/rename-css-selectors

Для этого есть Gruntplugin:

https://www.npmjs.com/package/grunt-rcs

Это минимизирует все селекторы CSS в файлах HTML, JS и CSS (фактически любой файл, который вы хотите). В конце я сохранил 20ish% размера файла CSS.

Answer 3

Это удивительно близоруко.

• Шаг 1: Включить сжатие GZip или Zlib на веб-сервере
• Шаг 2: Весь текст сжимается, часто на 70% или более
• Шаг 3:Нет шага 3.
• Шаг 4: ПРИБЫЛЬ

Answer 4

Есть плагин https://github.com/vreshch/optimize-css-classnames-plugin Работа в качестве Webpack Loader.Это может работать в большинстве случаев

Answer 5

Существует также gulp-селекторы .

Установите его:

npm install gulp gulp-selectors

Теперь быстрый и грязный node скрипт:

var gulp = require('gulp');
var gs = require('gulp-selectors');
gulp
  .src(['*.html', '*.css'])
  .pipe(gs.run({}, '{ids: "*"}'))
  .pipe(gulp.dest('.'))'

Второй аргумент gs.run() для того, чтобы он оставил идентификаторы как есть, см. Также его веб-сайт: https://www.npmjs.com/package/gulp-selectors

Answer 6

Нет ничего плохого в минификации с gzipping, даже до того, как современные браузеры представили исходные карты, минификация была лучшей практикой, потому что вы все равно можете получить значительную экономию даже при использовании в сочетании с gzipping.Мы терпим худшую читаемость на производстве, потому что повышение производительности того стоило.Теперь с исходными картами мы можем съесть наш пирог и съесть его.Вот хорошая статья, демонстрирующая влияние сочетания минификации с gzip на html-страницах для больших сайтов: http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

Разница в экономии, которую вы получаете, сильно варьируется в зависимости от распределения глифов минимизируемого кода, поэтому результатыбудет варьироваться в зависимости от стратегии минимизации и минимизируемого языка, и даже в зависимости от стиля кодирования.В среднем случае экономия все еще значительна.

Минификация обрабатывает больше, чем просто уплотнение глифов, она также может реструктурировать код для удаления ненужных символов при достижении того же эффекта, чего не может сделать gzipping.

Теперь, чтобы вернуться к вашему конкретному вопросу, в вашем случае вы хотите минимизировать глифы классов.Это сложнее сделать по нескольким причинам.Область видимости этих глифов находится между несколькими файлами, в противоположность тому, что их можно разместить в локальных частях одного файла.При минимизации javascript переменные глобальной области видимости не заменяются по умолчанию, поскольку они могут понадобиться в другом скрипте, но с помощью CSS вы не знаете, какие классы являются локальными, а какие могут быть определены в другом файле.Что еще хуже, вам также нужно синхронизировать замену класса с javascript, так как очень часто можно найти элементы DOM в коде через классы.Это было бы невозможно синхронизировать, так как классы могут создаваться динамически в javascript, и даже без этой проблемы это было бы огромным испытанием.Вы можете синхронизировать замену глифа в javascript только в том случае, если вы измените свой стиль кодирования, чтобы точно указать, где используются строки класса css: https://code.google.com/p/closure-stylesheets/#Renaming

К счастью, замена глифа - это то, что минимизация выполняет этот gzippingтакже очень и очень хорошо, поэтому экономия по размеру от этой конкретной стратегии минимизации намного меньше, чем у других стратегий, которые полностью удаляют глифы.

Answer 7

Для CSS есть YUI компрессор .Он удалит ненужные пробелы и преобразует ваши свойства в сокращенную, если вы еще не используете его.Что касается HTML, я не знаю ничего, но помните, что обрезка пробелов в HTML не всегда безопасна.