PHP Lang
  1. PHP Lang
  3. Оптимизация CSS для автоматического изменения имен классов
Intereting Posts
Количество строк, буферизированных в наборе результатов sqlite Не работает функция do_upload () Codeigniters Внедрение междоменной связи между сайтами через CORS с использованием PHP и Javascript Laravel 4 – Класс контейнера: функция распределения и закрытия ZF2: Как использовать средство проверки InArray для проверки элемента формы Multiselect? bind-адрес отсутствует в файле my.cnf – Laravel Как запланировать в php Динамическое заполнение статической переменной в PHP mysql_fetch_array возвращает повторяющиеся данные Использование чистых URL-адресов в RESTful API Как отсортировать функцию query_posts по настраиваемому полю, а ограничивать сообщения другим настраиваемым полем Symfony2 multiple Объекты одного класса в одной форме (SOLVED) безопасные сеансы / файлы cookie в php функция ucwords с исключениями Как определить, имеет ли строка в нем разрыв строки?

Оптимизация CSS для автоматического изменения имен классов

Я ищу инструмент для оптимизации полной сборки моего сайта. Я использую SASS в качестве CSS preprocessor и Uglify для создания моих файлов JavaScript и еще нескольких инструментов, связанных с Grunt . Кроме того, разметка в этом случае представляет собой единственный файл index.html , но в других проектах он находится в файлах PHP или в шаблонах Liquid.

Я использую BEM ( block, element, modifier ), чтобы назвать мои классы, а иногда, что приводит к довольно огромным именам классов, таким как navigation__item__link--home или даже дольше.

Я ищу инструмент, который автоматически преобразует окончательные, созданные файлы CSS таким образом, что он изменяет имена классов или идентификаторов на что-то вроде .a, .b , .a, .b , но изменяет каждый HTML и JavaScript-файлы в соответствии с тем же методом, так что коррелированные коды не будут перепутаны.

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

Solutions Collecting From Web of "Оптимизация CSS для автоматического изменения имен классов"

Похоже, вы ищете инструмент под названием munch . Это инструмент предварительного развертывания, который делает именно то, о чем вы просите. Это утилита командной строки, которую вы указываете на файлы вида (html), css и js, и сокращает имена классов и идентификаторы, сохраняя при этом их уникальность и сохраняя ссылочную целостность без изменений между всеми исходными файлами. Есть также некоторые удобные опции, такие как возможность вывода файла карты, в котором перечислены преобразования, которые он сделал. Документация довольно проста.

FWIW, я не являюсь аффилированным с проектом.

Я бы порекомендовал Grunt для этого.

Sass и css можно сделать с помощью существующего плагина grunt-sass, а javascript может использовать плагин grunt-uglify .

Хотя я не уверен, есть ли плагин, который уже выполняет обычную уганизацию, вы можете легко написать плагин для этого. Плагины Grunt записываются в узле, поэтому он довольно доступен, если вы знакомы с javascript.

Я думаю, что для этого есть простое решение. Используете ли вы Sublime текстовый редактор? Если нет, рекомендую. Одной из особенностей является «Поиск и замена нескольких файлов» .
Простой ctrl + shift + F должен делать трюк. Вы также можете использовать регулярные выражения.