Как минимизировать несколько / смешанные типы файлов

0

Я выполняю большую работу по оптимизации производительности сети, часто в проектах, где (очевидно) не каждый из них находится на одной странице с средой разработки или производства.

Большинство проектов, над которыми я работаю, используют HTML, CSS и JS, но очень часто HTML, который меня интересует, - это шаблоны PHP (в основном HTML).

Какие мини-юниты PHP (если они есть) будут корректно работать с файлами, которые в основном являются HTML, а какие мини-юниты JS и CSS будут давать код, который является дружественным к разработчику, но сгущенным (например, файлы CSS с каждым правилом в одной строке, сохраняя комментарии, но удаляя пробелы).

Из-за простоты выполнения различных задач я в настоящее время использую Grunt и большинство плагинов "contrib" для большей части этого, но, похоже, не существует много оснований между простой конкатенацией и полной конкатенацией и минимизацией (т.е. весь код на одна линия).

Существуют ли какие-либо инструменты, которые предлагают средний уровень и/или могут обрабатывать смешанные типы файлов (например, файлы PHP, которые содержат в основном HTML или файлы с расширением .htm(l) которые содержат PHP)?

  • 0
    Я не вижу проблемы с файлами js / css. У вас есть файлы для разработки и программа Grunt, чтобы минимизировать их, при этом сохраняя исходные файлы, чтобы сделать это снова. Вы используете минимизированные файлы в вашем приложении. Очень похоже на инструменты, такие как МЕНЬШАЯ работа. Вы не включаете файл .less, но используете выведенный css.
  • 0
    Моя главная забота - читабельность. Я обычно работаю над производственным кодом (и я не думаю, что они используют препроцессоры), а в полностью минимизированном коде сложно ориентироваться и пропустить такие вещи, как разрывы между файлами и посторонние точки с запятой. Хотя мне нравится использовать Uglify и генерировать исходные карты, и я знаю, как использовать DevTools в сочетании с этими техниками, я не могу предположить, что все так делают, и поэтому я хотел бы найти подход среднего уровня.
Показать ещё 2 комментария
Теги:
performance
minify

1 ответ

0

Здесь самое удовлетворительное решение, которое я нашел (по состоянию на вчера)... извините, но я должен упомянуть конкретную программу (я предполагаю, что другие программы могут сделать то же самое).

Самое ясное объяснение, которое я могу дать, это CSS:

Откройте проект в Sublime Text, выполните команду "Заменить" с помощью опции соответствия регулярному выражению find \n\n (2 возврата каретки) и замените на \n (1 возврат каретки).

Сохранить.

Затем откройте проект в среде IDE, задайте параметры форматирования кода, чтобы объявления, свойства и закрывающие скобки находились в их собственных строках, и каждый из них с отступом равный.

Затем я применил эти настройки ко всему проекту и переформатировал код. Чтобы предотвратить сопоставление классов psuedo, я установил его так, чтобы после двоеточий, разделяющих правила с объявлениями, было пробел. Например:

a:hover{
font-weight: bold;
}
p{
font-weight: normal;
}

Затем я сделал "найти все" для a : (сразу же после этого в Sublime Text я просто выделил двоеточие и конечное пространство, затем выбрал опцию "select all" (command+ control + g на Mac).

Затем я переместил курсор в начало каждой строки (command+ ︎ [что стрелка влево]) и удалил, пока все свойства не были в одной строке.

Затем я перешел к следующей строке, линии, в которых есть только } (закрывающая скобка) и удалены до тех пор, пока она не окажется в той же строке, что и свойства и объявления.

Затем я скорректировал этот процесс для работы над всеми необходимыми файлами (PHP/HTML, CSS, JS).

Конечный результат - компактный, удобный для пользователя, читаемый код, в котором все функции, отличные от разработчика, остаются нетронутыми (полуколоны после последнего свойства в декларации, объявления в отдельных строках).

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню