Всем доброго времени суток!
В этой статье я расскажу о том, как боролся с временными метками css файлов.
Чем же они мне так помешали? Верстка отзывчивых шаблонов сайта и компонентов Битрикса на самом деле занимает очень много времени. В своё время ощутимо удалось снизить количество человеко-часов на верстке в других CMS с помощью инструментов
Emmet LifeStyle + SublimeText 3.
Расскажу, как это работает для тех, кто еще не сталкивался с этими современными инструментами.
Emmet LifeStyle – расширение для браузера Google Chrome, которое будет передавать
«на лету» любые изменения значений CSS свойств из инспектора Google Chrome в редактор кода SublimeText 3. Редактор в свою очередь после сохранения файла, сразу синхронизирует его по FTP с файлом на удаленном сервере. Также работает и обратная связь.
Останавливаться на установке этих инструментов я не буду. В интернете полно статей о том, как это сделать.
К сожалению, в CMS 1С-Битрикс, в header.php все файлы CSS, которые подключаются стандартными методами продукта
$APPLICATION->ShowCSS() или ($APPLICATION->ShowHead() |
, идут с указанием временной метки (дополнительные цифры после знака ?), без которой не будет корректно работать CDN. Смотрите скриншот.
Изначально, Emmet LifeStyle нормально ассоциирует эти css файлы инспектора Google Chrome с открытыми через FTP файлами в редакторе Sublime. Проблема начинается тогда, когда вносишь первое изменение, сохраняешь файл по FTP и перезагружаешь страницу в браузере. Временная разметка у файлов моментально меняется, и Emmet LifeStyle теряет связку с файлами редактора.
Приходится вручную ему снова указывать связь с файлами. Такая работа никому не нужна.
Отключить временную разметку стандартными средствами нельзя, как сообщила мне техническая поддержка, а лезть с правками в ядро Битрикса не представляется возможным.
Отказываться от новых инструментов не хочется, ведь они реально сокращают наше время верстки и, соответственно, расходы на создание сайта.
Придумал простенький скрипт nocdn.js, который без правок файлов смог нам облегчить жизнь.
Правило его подключения:
- Загрузить файл скрипта nocdn.js в папку js вашего шаблона сайта
<?=SITE_TEMPLATE_PATH?>/js/nocdn.js |
- Внутри тега закомментировать функцию вывода списка подкрепляемых css-файлов:
<!--<?$APPLICATION->ShowCSS();?>--> |
Комментировать обязательно HTML-комментированием!
- Внутри тега не должно быть любых других закомментированных строк, то есть не должны встречаться следующие символы: <!-- и -->
- Отключить автокэширование и сжатие css файлов в админке сайта.
- Ниже вызова функции подкрепить строку вызова скрипта nocdn.js:
<sc ript type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/nocdn.js"></sc ript> |
Итак, у меня получилось в теге
следующее:
<?
echo '<met a http-equiv="Content-Type" content="text/html; charset='.LANG_CHARSET.'"'.(true ? ' /':'').'>'."\n";
$APPLICATION->ShowMeta("robots", false, true);
$APPLICATION->ShowMeta("keywords", false, true);
$APPLICATION->ShowMeta("description", false, true);
?>
<!--<?$APPLICATION->ShowCSS(true, true);?>-->
<sc ript type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/nocdn.js"></sc ript>
<?
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
<sc ript type="text/javascript" src="/bitrix/js/main/core/core_popup.js"></sc ript>
<sc ript type="text/javascript">
jQuery.noConflict();
</sc ript>
<sc ript type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.jcarousel.new.js"></sc ript>
<sc ript type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.slides.min.js"></sc ript> |
Лучше использовать
<!--<?$APPLICATION->ShowCSS(true, true);?>, чем <!--<?$APPLICATION->ShowHead();?> |
и ниже просто добавить вывод скриптов:
<?
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?> |
Так будет правильно отображаться режим правки панели «Эрмитаж».
Сохраняем и пользуемся! В инспекторе Хрома вы увидите, что файлы CSS уже не имеют временной разметки, то есть цифр.
Принцип работы скрипта очень простой. Кстати он еще сырой, может у кого-нибудь будут предложения по его доработке.
- При загрузке страницы
<?$APPLICATION->ShowCSS()?> |
вызывает все файлы css с временной разметкой, но они сразу попадают в html комменты и поэтому никак не влияют на визуальное оформление страницы, то есть не участвуют, и инспектор Хрома их не ловит.
- Далее срабатывает мой скрипт, который с помощью регулярного выражения находит внутри коммента все записи .css?... с различными цифрами и просто заменяет их на .css. После всех замен, он раскомментирует наш блок и отдаст браузеру на выполнение.
Такую идею наш Emmet LifeStyle принял и благополучно съел. Мы все довольны и продолжаем работать на CMS Битрикс.
Кстати, Сафари такой трюк не понимает и сайт загружается без подгрузки файлов стилей.
Внимание! Не забудьте, когда сдаете проект, закомментировать или удалить подкрепление скрипта nocdn.js и раскомментировать:
<?$APPLICATION->ShowCSS()?> |