Minifix modx: MinifyX минимизация CSS и JS
Вопросы по MinifyX / Русскоязычное сообщество MODX
Каждый раз прежде, когда пытался использовать это дополнение, натыкался на нерешимые преграды и отказывался, так и не исследовав всё до конца.
Но в текущий проект большой и требует серьёзной оптимизации — вот и пытаюсь последние 2 дня разобраться что откуда растёт.
Итак, у меня следующие вопросы по использованию MinifiX:
- Можно ли настроить уровень сжатия css? Хотелось бы получить минифицированный в 1 строку файл, а то получается файл из тысяч строк кода… А минифицировать в одну строчку рабочий файл стилей и подключать его минифицированным как-то неправильно — ведь потом с ним ещё работать…
- Обрабатывает уже сжатые файлы. Почему-то некоторые минифицированные мною файлы в одну строку с префиксом .min он всё равно разделяет на строки добавляя в общий файл стилей.
- минифицированные файлы некоторые обрабатывает. Закономерность такого поведения ещё не нашел.
- Иконки fontawesome из уикита при подключении через MinifyX иногда непонятно почему превращаются в иероглифы:
- Что делать с необработанными файлами? Хотя системная настройка minifyx_process_registered включена, у меня всё равно не обрабатываются и подключаются в конец head и body следующие файлы:
<link rel="stylesheet" type="text/css" href="/assets/components/tickets/js/web/lib/prettify/prettify.css"> <script src="/assets/components/office/js/main/lib/jquery.form.min.js"></script> <script src="/assets/components/office/js/main/lib/jquery.jgrowl.min.js"></script> <script src="/assets/components/tickets/js/web/lib/jquery.form.min.js"></script> <script src="/assets/components/tickets/js/web/lib/jquery.jgrowl.min.js"></script> <script src="/assets/components/tickets/js/web/lib/jquery.sisyphus.min.js"></script> <script src="/assets/components/ajaxform/js/lib/jquery.form.min.js"></script> <script src="/assets/components/ajaxform/js/lib/jquery.jgrowl.min.js"></script> <script src="/assets/components/ajaxform/js/lib/jquery.form.min.js"></script> <script src="/assets/components/ajaxform/js/lib/jquery.jgrowl.min.js"></script>
- Повторяющиеся файлы. И кстати, зачем одни и те же скрипты подключаются каждым компонентом отдельно? В примере из прошлого пункта видно что скрипты jquery.form.min.js и jquery.jgrowl.min.js подключаются 4 раза на одной странице 3-мя разными компонентами!
- РЕШЕНО.
Не подхватывает сырой код между тегами style и scripts. Все мозги себе сломал, пока не понял, что обрабатывается только тот код в этих тегах, который регистрируется через методы modX::regClientScript, modX::regClientCSS и т.п. Как-то неявно это было описано, а скорее всего это я не совсем понимал и зациклился на описании системных параметров minifyx_processRawJs и minifyx_processRawCss, где не упоминается что код должен быть зарегистрирован этими методами.
У меня на сайте очень много js-кода разнесено по чанкам, т.к. там подставляются различные переменные системой. В итоге решил эту проблему на феноме путём добавления такой строки для каждого чанка:{$_modx->regClientHTMLBlock($_modx->getChunk('scripts.ajax'))} {$_modx->regClientHTMLBlock($_modx->getChunk('scripts.modal'))}
P.S. Понятное дело что все системные параметры минификса включены, кроме обработки изображений (они мне не нужны).
Ошибка при работе с MinifyX / Русскоязычное сообщество MODX
Добрый день!
При подключении таблицы стилей страница сайта при первой загрузке в google chrome выкидывает ошибку HTTP ERROR 500. При обновлении с 3 попытки страница отображается нормально.
Журнал ошибок в Modx пустой, а в журнале ошибок хостинга следующее:
PHP Fatal error: Uncaught exception 'Sabberworm\\CSS\\Parsing\\UnexpectedTokenException' with message 'Identifier expected. Got \xe2\x80\x9c:767p\xe2\x80\x9d' in /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php:178\nStack trace:\n#0 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(402): Sabberworm\\CSS\\Parser->parseIdentifier(true, false)\n#1 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(357): Sabberworm\\CSS\\Parser->parsePrimitiveValue()\n#2 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(189): Sabberworm\\CSS\\Parser->parseValue(Array)\n#3 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(114): Sabberworm\\CSS\\Parser->parseIdentifier( in /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php on line 178, referer: http://site.ru/
Ошибка возникает при таком подключении таблицы стилей:
[[MinifyX?
&minifyCss=`1`
&cssSources=`[[++assets_url]]css/headers/header-v8.css`
]]
и вывод в шаблоне через плейсхолдер [[+MinifyX.css]].
Т.е затык происходит при парсинге файла header-v8.css, а другие файлы (~6 таблиц) в другом шаблоне подкл. нормально.
Вот сам файл header-v8.css
Однако вся эта фигня не была замечена в Mozilla Firefox.
CallBack / Компоненты / docs.modx.pro
Компонент для вывода, обработки и ведения журнала заявок на обратный звонок.
- При установке подгружает необходимые по умолчанию компоненты — AjaxForm и FormIt.
- Выводит ссылку «Обратный звонок», по нажатию на которую появляется модальная форма. В этой форме пользователь может указать свой номер телефона и как к нему обратиться при звонке.
- Отправленная заявка приходит на указанную почту и записывается в журнал.
- В журнале заявок можно осуществлять поиск по указанному имени и телефону, добавлять комментарии к заявкам.
- В комплекте идет jQuery Mask Plugin, позволяющий задать маску для телефона. Все стандартное оформление выполнено с помощью Bootstrap.
- Основная идея и задача компонента — максимально ускорить установку рабочего решения для обратного звонка.
Параметры сниппета
Имя | По умолчанию | Описание |
---|---|---|
&tpl | tpl.callBack.item | Образец чанка для вывода ссылки на вызов модальной формы. |
&target | callBackModal | Идентификатор для связи кнопки с формой. |
®isterBootstrap | 1 | Определяет нужно ли добавлять скрипты Bootstrap. |
®isterCss | 1 | Определяет нужно ли добавлять стандартные CSS-стили на Bootstrap. |
&wrapperSnippet | AjaxForm | Сниппет для добавления форме Ajax-поведения. |
&toPlaceholder | Имя плейсхолдера, в который выводить модальную форму отдельно от кнопки. |
Параметры сниппетов AjaxForm и FormIt, используемые по умолчанию
Имя | По умолчанию | Описание |
---|---|---|
&snippet | FormIt | Сниппет для обработки формы. |
&form | tpl.callBack.form | Образец чанка для вывода формы заявки на обратный звонок. |
&hooks | email,callBackLog | Хуки для FormIt после обработки формы. По умолчанию — отправить письмо и записать в журнал. |
&validate | phone:required,name:required | По умолчанию требуются телефон и имя. |
&emailSubject | [[%callback.emailSubject]] | Сниппет для добавления форме Ajax-поведения. |
&emailTpl | tpl.callBack.email | Образец шаблона письма администратору. |
&successMessage | [[%callback.successMessage]] | Сообщение об удачной отправке формы. |
&emailTo | [[++emailsender]] | Куда отправлять письмо с данными формы. |
Можно использовать и любые другие параметры AjaxForm и FormIt.
Маска для телефона задается параметром data-mask, например:
<input type="text" name="phone" value="[[!+fi.phone]]" data-mask="+0(000)000-00-00">
Журнал звонков
По умолчанию выводится имя, телефон, все дополнительные текстовые данные из формы, время отправки формы. В дополнительные данные так же заносится Email, на который отправлялась форма.
Чтобы дополнительные данные выводились с русскими заголовками, достаточно создать в Управлении словарями запись вида callback_item_имяполя.
Например, если форма имеет поле city, создаем лексикон callback_item_city со значением «Город».
Для каждой заявки можно оставить комментарий или отредактировать имя и телефон. Ну и, конечно, можно удалить запись или сразу несколько.
Примеры
- Самый простой вызов, подходит для первоначальной установки на чистом сайте:
[[!callBack]]
- Если на сайте уже используется Bootstrap, то его подключение следует убрать во избежание ошибок:
[[!callBack? ®isterBootstrap=`0` ®isterCss=`0`]]
- При использовании сниппета, например, внутри navbar из Bootstrap’а может возникнуть эффект перекрытия формы фоновым затемнением. Чтобы этого избежать форму нужно вынести как можно выше в DOM. Для этого добавлен параметр &toPlaceholder.
[[!callBack? ®isterBootstrap=`0` ®isterCss=`0` &toPlaceholder=`modal_form`]]
...
[[+modal_form]]
Дополнения MODX
В этом разделе я собрал дополнения (модули MODX), которые я устанавливаю сразу после разворачивания
дистрибутива при разработке сайтов. Среди этих дополнений есть как обычные сниппеты MODX, выполняющие
те или иные функции, так и полноценныые модули со своей страничкой в разделе «Компоненты» в админке
Рядом с каждым дополнением есть ссылка на его страничку в официальном репозитории и на последнюю сохраненную версию
на моем сайте. По возможности, скачивайте версию из официального репозитория (если он доступен) — ведь я не могу поддерживать
версии всех дополнений в актуальном состоянии.
Надеюсь, я не нарушил никаких лицензий.
pdoTools
Компонент-замена нескольких пакетов для выборки ресурсов или других объектов. От своих аналогов отличается скоростью.
В состав входят следующие сниппеты:
- pdoResources — Выводит списки ресурсов. Полноценная замена getResources
- pdoSitemap — Выводит xml-карту сайта. Аналог GoogleSiteMap
- pdoCrumbs — Добавляет на сайт навигацию в виде хлебных крошек. Заменяет Breadcrumb
- pdoField — Предоставляет доступ к полям ресурсов. Заменяет одновременно getResourceField и UltimateParent
- pdoUsers — Выводит список пользователей сайта. Поддерживает фильтрацию по группам пользователей
- pdoNeighbors — Показывает ссылки на следущий и предыдущий ресурсы
- pdoPage — Реализует постраничность, так же, как и getPage
- pdoMenu — Выводит меню на сайте в виде списка ссылок. Аналог Wayfinder
Ace
Подсветка синтаксиса в админке для чанков, сниппетов и пр. Дополнение нереально крутое —
есть даже автодополнение. Если вы пользуетесь CodeMirror или прочими пакетами для подсветки — просто попробуйте 🙂
autoRedirector (модуль MODX)
Компонент отслеживает изменения адресов страниц на сайте и, если вы меняете адрес какой-то страницы,
автоматически проставляет редирект. Можно использовать вместо Redirector, так как позволяет в админке вручную добавить
любое правило редиректа.
Batcher (модуль MODX)
Дополнение позволяет массово переключить у ресурсов шаблон, состояния Показывать/Не показывать, Опубликован/Не опубликован
и пр. Редко когда пригождается, но пару раз он меня очень выручал.
BreadCrumb (сниппет)
На мой взгляд, самое простое дополнение, добавляющее на сайт навигацию в форме хлебных крошек.
Console (модуль MODX)
Добавляет в админ-панель консоль, в которой можно тестировать php-код и сразу же видеть результат его выполнения.
Очень выручает, когда надо сделать какую-нибудь хитрую выборку или отладить какой-то кусок кода.
DirectResize2
Уменьшает вставленные в контент изображения до нужного размера, подключая одну из трех JS-библиотек, которые увеличивают
картинки по клику. В итоге сайт загружается быстрее, так как картинки все «ужаты».
FastUploadTV
Добавляет новый тип ТВ-параметров для упрощенной загрузки картинок контент-менеджером. Этот ТВ представляет из себя
кнопку, при нажатии на которую открывается окно выбора файла. Выбранный файл загружается на сайт в предварительно
указанную папку и прикрепляется к ресурсу.
FormIt (сниппет)
Обрабатывает любые формы. Позволяет сделать валидацию полей форм, после чего передает данные в указанный сниппет для дальнейшей
обработки. Может отправлять почту. Часто используется для создания контактных форм на сайте, но этим его возможности далеко не
органичиваются. Советую уделить этому сниппету много внимания и изучить все его возможности.
AjaxForm (сниппет)
Добавляет возможность реализовать отправку любой формы через AJAX. Хорошо взаимодействует с FormIt и по умолчанию настроен на автоматическую
работу с такими формами.
MinifyX (сниппет)
Объединяет и минифицирует стили и скрипты на сайте. Если вызывать некешированным, то отслеживает изменения файлов и пересобирает
результирующий файл.
Gallery (модуль MODX)
Создавайте альбомы, в которые загружайте любое количество изображений. Очень удобный интерфейс в админке и очень простой
сниппет вывода галереи на сайте. Есть возможность прикрепить к каждому документу на сайте свою галерею (см.
Управление альбомом галереи на странице
ресурса).
impArt (модуль MODX)
Предназначен для массового добавления статей на сайт. Все статьи загружаете в одно поле, разделив их символом #
и импортируете как дочерние ресурсы к нужному документу.
MIGX (модуль MODX)
Даёт возможность создавать в админке табличные ТВ-параметры с удобным интерфейсом добавления и редактирования строк.
modLastModified
Возвращает пользователям (и поисковикам) заголовки Last-Modified и Not modified. Благодаря этому поисковики смогут чаще
приходить на ваш сайт, чтобы проверить изменения — ведь нагрузка на их серверы будет меньше благодаря этим заголовкам.
phpThumbOn (сниппет)
Позволяет ресайзить картинки на сервере. Создает превьюшки, обрезает картинки, накладывает водяные знаки и пр.
simpleUpdater
Добавляет в раздел «Приложения» пункт «Обновить MODX», в котором вы можете провести апгрейд системы всего одной кнопкой.
CKEditor
Визуальный редактор для ресурсов в админке MODX. Аккуратная и симпатичная панель инструментов, чистый код.
Collections
Создаёт отдельный тип ресурса — коллекцию. Дочерние ресурсы коллекции не показываются в дереве, а отображаются на странице в виде удобной таблички.
Идеально для разделов новостей или блогов
Translit
Транслитерирует названия ресурсов, прежде чем установить в качестве псевдонима. Здесь локальная версия отличается от версии
в репозитории несколько другой таблицей транслитерации. Например, в официальной версии буква «Ц» будет преобразована в «cz»,
а в локальной версии — в «c».
VersionX (модуль MODX)
Создает локальные бекапы всех элементов — от чанков до ресурсов. Вы всегда сможете посмотреть старую версию и, если надо,
восстановить ее. Кроме того, можно узнать, кто именно внес те или иные изменения.
xPoller (модуль MODX)
Компонент для организации AJAX-опросов для вашего сайта
SiteHeart
Добавляет на сайт чат онлайн-поддержки от SiteHeart
MODX MinifyX — ускоряем сайт и уменьшаем нагрузку на сервер
Автор Алексей На чтение 3 мин. 954 Опубликовано Обновлено
Сегодня небольшой урок о том как минимизировать css и js файлы при помощи MinifyX, тем самым мы ускоряем сайт и уменьшаем нагрузку на сервере .
MinifyX можно установить как с основным так и с репозитория modstore (лучше с ним).
И так, у нас есть вот такой статический код:
в теге head у нас подключаются все стили:
<ссылка href = "/ assets / plugins / bootstrap / css / bootstrap.min.css "rel =" stylesheet "type =" text / css "/>
А в футере все скрипты
Вызываем сниппет
[[MinifyX? & minifyCss = `1` & minifyJs = `1` & registerJs = `по умолчанию` & registerCss = `по умолчанию` & jsSources = ` активы / плагины / jquery / jquery-2.1.4.min.js, активы / js / scripts.js, ` & cssSources = ` активы / плагины / bootstrap / css / bootstrap.min.css, активы / css / essentials.css, активы / css / layout.css, активы / css / header-1.css, активы / css / color_scheme / green.css, ` ]]
Тут мы подключили все стили и скрипты, осталось их вывести:
[[+ MinifyX.css]] [[+ MinifyX.javascript]]
Вывод MinifyX при помощи Fenom
Если вы собираете сайт на шаблонизаторе Fenom, тогда вызов будет следующим.
{'! MinifyX' | фрагмент: [ 'minifyCss' => 1, 'minifyJs' => 1, 'jsSources' => ' активы / плагины / jquery / jquery-2.1.4.min.js, активы / js / scripts.js ', 'cssSources' => ' активы / плагины / bootstrap / css / bootstrap.min.css, активы / css / essentials.css, активы / css / layout.css, активы / css / header-1.css, активы / css / color_scheme / green.css ' ]} {$ _modx-> getPlaceholder ('MinifyX.css')} {$ _modx-> getPlaceholder ('MinifyX.javascript')}
Примечание. Я обычно использую вот такую конструкцию с авторегистрацией стилей перед и скриптов перед