Подтвердить что ты не робот

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

В текущем проекте меня попросили сжать атрибут класса 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*/}

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

Это удивительно недальновидно.

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

Ответ 3

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

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

Для него есть и Gruntplugin:

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

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

Ответ 4

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

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

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

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

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

Ответ 5

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

Ответ 6

Существует также gulp-selectors.

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

npm install gulp gulp-selectors

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

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

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