[MinifyX] Новые возможности старичка
Всем привет! Сегодня поговорим про дополнение MinifyX. Все знают, что это, но не все, что оно больше не поддерживается автором. Основная причина — ядро минифая (библиотека Munee) уже давно не обновляется. Вроде есть проблемы с Bootstrap 4.
Но мне он нравится. А главное, он выполняет всё, что требуется — собирает и минифицирует мои скрипты и стили без ошибок. Я не компилирую сасы, лесы, кофе. Единственное, не хватало разных мелочей для удобства. Вот захотелось мне собирать всё в один файл — и обычные скрипты и скрипты дополнений. Сниппетом это сделать не очень просто, но можно — для каждого шаблона делать отдельный вызов с перечнем необходимых файлов. Но этот вариант не вызвал у меня энтузиазма. И я решил реализовать другой подход. У меня сниппет MinifyX вызывается в чанке head, в котором я определяю секцию HEAD страницы. Поэтому я подумал, а почему бы не использовать подход загрузки файлов по требованию.
Для тех, кто не знает, в MinifyX есть режим автоматической сборки скриптов и стилей с помощью плагина. Все файлы, зарегистрированные через специальные методы MODX, можно собрать и минифицировать. Но данный вариант меня не устраивает невозможностью управлять порядком загрузки файлов.
В общем, я сосредоточился на сниппете. Первое, что я добавил, это группы. Т.е. скрипты можно группировать и подключать указывая группы. Так стало гораздо удобнее. Вот как выглядят эти самые группы.
Но я выше уже говорил, что у меня только один вызов сниппета из чанка head для всех шаблонов. Поэтому я реализовал механизм хуков, позволяющий расширять функционал компонента. В них можно подгружать или заменять файлы в зависимости от условий. Работает это так
Хуки бывают 2-х типов — хуки предварительной обработки и хуки пост обработки. Они указывают в параметрах «preHooks» и «hooks» соответственно. Сделал по аналогии с FormIt, чтобы не путаться. В пре-хуках можно добавлять группы и файлы. В пост-хуках изменять имя сформированного кэш-файла и его содержимое, что может пригодиться в случае ошибок минификации (компрессии).
Мой пре-хук для блога
Методы addCssGroup, addJsGroup, addJsSource и addCssSource добавляют группы и файлы к уже добавленым. Методы setCssGroup, setJsGroup, setJsSource и setCssSource заменяют ранее добавленные файлы на указанные.
Пример пост-хука:
Но мне он нравится. А главное, он выполняет всё, что требуется — собирает и минифицирует мои скрипты и стили без ошибок. Я не компилирую сасы, лесы, кофе. Единственное, не хватало разных мелочей для удобства. Вот захотелось мне собирать всё в один файл — и обычные скрипты и скрипты дополнений. Сниппетом это сделать не очень просто, но можно — для каждого шаблона делать отдельный вызов с перечнем необходимых файлов. Но этот вариант не вызвал у меня энтузиазма. И я решил реализовать другой подход. У меня сниппет MinifyX вызывается в чанке head, в котором я определяю секцию HEAD страницы. Поэтому я подумал, а почему бы не использовать подход загрузки файлов по требованию.
Для тех, кто не знает, в MinifyX есть режим автоматической сборки скриптов и стилей с помощью плагина. Все файлы, зарегистрированные через специальные методы MODX, можно собрать и минифицировать. Но данный вариант меня не устраивает невозможностью управлять порядком загрузки файлов.
В общем, я сосредоточился на сниппете. Первое, что я добавил, это группы. Т.е. скрипты можно группировать и подключать указывая группы. Так стало гораздо удобнее. Вот как выглядят эти самые группы.
<?php
return [
'baseCss' => [
'[[+assets_url]]css/bootstrap.min.css',
'[[+assets_url]]css/font-awesome.min.css',
'[[+assets_url]]css/bootstrap-theme.css',
'[[+assets_url]]components/sitestatistics/css/web/style.css',
'[[+assets_url]]components/hybridauth/css/web/default.css'
],
'ticketsCss' => [
'{assets_url}components/tickets/css/web/default.css',
'{assets_url}components/tickets/js/web/editor/editor.css'
],
'ticketsJs' => [
'{assets_url}components/tickets/js/web/default.js',
'{assets_url}components/tickets/js/web/editor/jquery.markitup.js'
],
'officeCss' => [
'[[+assets_url]]components/office/css/main/default.css',
'[[+assets_url]]components/office/css/profile/default.css'
],
'officeJs' => [
'[[+assets_url]]components/office/js/main/default.js',
'[[+assets_url]]components/office/js/auth/default.js',
'[[+assets_url]]components/office/js/profile/default.js'
],
];{$_modx->runSnippet('MinifyX', [
'cssGroups' => 'baseCss,ticketsJs',
'jsGroups' => 'ticketsJs',
]
)}Но я выше уже говорил, что у меня только один вызов сниппета из чанка head для всех шаблонов. Поэтому я реализовал механизм хуков, позволяющий расширять функционал компонента. В них можно подгружать или заменять файлы в зависимости от условий. Работает это так
{$_modx->runSnippet('MinifyX', [
'cssGroups' => 'baseCss',
'preHooks' => 'main' // main.php - хук-файл
]
)}Хуки бывают 2-х типов — хуки предварительной обработки и хуки пост обработки. Они указывают в параметрах «preHooks» и «hooks» соответственно. Сделал по аналогии с FormIt, чтобы не путаться. В пре-хуках можно добавлять группы и файлы. В пост-хуках изменять имя сформированного кэш-файла и его содержимое, что может пригодиться в случае ошибок минификации (компрессии).
Мой пре-хук для блога
<?php
if ($modx->resource->parent == 10) {
// Добавляем группы
$MinifyX->addCssGroup('ticketsCss,officeCss');
$MinifyX->addJsGroup('ticketsJs,officeJs');
// Добавляем файлы
$MinifyX->addCssSource("{assets_url}css/jquery.fancybox.css");
$MinifyX->addJsSource("{assets_url}js/jquery.fancybox.js");
}
// Стили сайта. Должны подключаться самыми последними
$MinifyX->addCssSource("{assets_url}css/style.css");Методы addCssGroup, addJsGroup, addJsSource и addCssSource добавляют группы и файлы к уже добавленым. Методы setCssGroup, setJsGroup, setJsSource и setCssSource заменяют ранее добавленные файлы на указанные.
Пример пост-хука:
<?php
// Получаем и изменяем содержимое кэш-файла стилей
if ($MinifyX->isCss()) {
$content = preg_replace('#vm ax#', 'vmax', $MinifyX->getContent());
$MinifyX->setContent($content);
}
// Пример изменения названия файла скриптов. Имейте ввиду, что эти файлы при очистке кэша удаляться не будут.
if ($MinifyX->isJs()) {
$MinifyX->setFilename('main.min.js');
}Итог
Так как Василий больше не поддерживает это дополнение, то и PR слать бессмысленно. Но он по доброте душевной решил отдать MinifyX в хорошие руки. На Гитхабе я уже могу хозяйничать, а вот добавлять в репозитории новые версии никак. Поэтому пока радуемся за меня. :) В дальнейшем чего-нибудь придумаем.
Комментарии: 80
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
П.С. По Tickets и Office. С тикетс можно PR послать (возможность отключать файлы редактора markItUp). А вот с Office такой возможности нет. Если коротко о проблеме — если отключить загрузку скриптов, то перестает инициализироваться переменная OfficeConfig. Думаю, инициализацию javascript конфига нужно вынести из условия проверки наличия файла скриптов.
Заодно можешь посмотреть исходный код страниц нового dev.modx.pro — там это всё решено.
возвращает:
из-за пробела неработает
Вот если бы за минификацию css отвечал инструмент — github.com/css/csso
То оптимизация стилей стала бы просто сказкой на MODX, так как ещё не было случая когда эта библиотека что-то не могла правильно обработать в CSS, да и обновляется она регулярно.
А так, Сергей, как всегда, спасибо Вам за Ваши старания.
Насколько я понял, csso — яваскрипт компрессор. Это не вариант.
Munee сам не работает с файлами напрямую. Он использует зависимости — для less, sass, coffeescript, javascript и т.д. А они практически все периодически обновляются. Вот например пакет для работы с css.
В принципе, никто не мешает форкнуть Munee и прикрутить другие зависимости.
Добавил параметр
а в сниппете:
Пути к файлам определяются в параметрах сниппета.
У меня 1,4,4 — и говорит, что обновлений нет!
— В сниппет добавлены параметры «cssTpl» и «jsTpl», в которых можно указать шаблоны для вывода файла стилей и скриптов.
— Добавлен пункт «print» в параметры «registerCss» и «registerJs» для немедленного вывода файла в месте вызова сниппета.
— Добавлена поддержка настройки «forceUpdate». Сейчас она не используется, так как если вы изменили что-то в файлах, то создается новый файл. Но при разработке это не удобно. На каждое изменение css стиля создается новый файл. За день их может наколбасится огромное количество. Решается указанием полного имени файла (см. ниже).
— Добавлена системная настройка «forceDelete», разрешающая удаление всех файлов в папке. Она используется при очистке кэша. В старой версии удаляются только файлы, соответствующие паттерну для кэш-файлов. А так как в хуках можно переименовывать файлы, то они могут не удалиться при очистке кэша из-за несоответствия паттерну.
— Теперь можно указывать полное имя файла, а не как раньше только префикс («all» или «styles»). Он и будет создан, а не хешированный файл типа «styles_2k784axf49.min.css». Сейчас это можно делать только в хуке. Вот тут и пригодится «forceUpdate».
Ну и так по мелочи. Пока гоняю. К вечеру выложу в modStore.
П.С. Комментарий тянет на целую статью :)
но при этом, если calc с минусом, то стили присутствуют, все нормально:
Сейчас даже при отключённом сжатии идёт обработка CSS и на выходе получаем вырезанный calc.
Возможно ли полностью исключить обработку, но склеивать файлы как есть.
Если нужно всего лишь склеить файлы, то напишите простой сниппет, который зачитает указанные файлы и сохранит их в один.
Главная боль — PageSpeed Insights постоянно ругается на скрипты и стили минишопа, офиса, бутстрапа и даже на jquery который в head подключать надо иначе все перестает работать – что с этим делать?
Может сделать компонент платным, а взамен потратить какое-то время на доработку, подробную документацию и на примеры решения частых проблем?
Типа такого:
Удаляются файлы из папки, указанной в системных настройках minifyx_cacheFolder,
при этом из папки указанной в параметре cacheFolder (при вызове сниппета) ничего не удаляется.
Сниппет тут не причем.
ДенисДенисПри таком вызове скрипты/стили компонентов добавляются и в файл /assets/components/minifyx/cache/scripts_da96bb5729.min.js и повторно вызываются на странице самим дополнениями (tickets, PDOtools)
Есть ли возможность оформлять вывод скомпилированных файлов? Есть необходимость добавлять async к .
Заранее благодарен.
2) Так же MinifyX при включенном плагине ругается на скрипты miniShop2 и mSearch2. В журнале ошибка:
Почему-то вырезается из пути "/web/"
3) Можно как-то сделать так, чтобы стили и скрипты подключаемые с других сайтов, автоматически игнорировались при включенном плагине? сейчас прописал регулярку в настройках, но все равно такие файлы не компилируются, поэтому думаю может сразу игнорировать их автоматически?
4) можно разделить папки кеша стилей и скриптов?
Файл группы core/components/minifyx/config/groups.php:
В прехуке, хочу получить значение lightgalleryJs
$url пустой.
Во-вторых, файл groups.php — это репозиторий групп. Он содержит список всех групп. Но они не подключаются. Для подключения группы её нужно указать в соответствующем параметре сниппета. А затем к ней можно обратиться через getJsGroup().
picplus.ru/img/1808/09/8adfd571.png
Из за этого не работает нормально сайт,
вот собственно вызов сниппета:
а вот файл groups.php
и main.php:
короче, пока что не получается объединить в один файл скрипты дополнений, если есть минишоп)
а по простенькому закостылить нет вариантов?)
или я что-то не так понимаю?
а не за
Да — согласен — конфиг перестает регистрироваться, о чем конкретно вам Андрей еще и на Github написал
Я пропустил, что вопрос конкретно про miniShop2Config - да судя по всему если не добавлять эти данные в код JS приложения - будут проблемы. Нужно подумать - проблема ли это вообще, глобальная ли она, и есть ли смысл ее решать. У нас в любом случае планируется перестройка всего JS
добавил в файл minishop2.class.php на строку 143 такой код:
вроде работает и теперь можно подключаемые на страницу файлы минишопа засунуть в один файл minifix-а и теперь все функции на сайте работают нормально…
Я в своё время делал такое же для mSearch2. Только создал новый класс, который наследовался от базового.
Так понимаю в mSearch2 добавили такую возможность в базовую сборку? Почему нельзя сделать так же с minishop2 в одном из следующих обновлений?
Можно, думаю сделают. Вопрос только когда?))) У них там полно работы судя по issue на github.
Можешь туда им написать, предложив свой код.
А у меня вторая серия, только теперь с tickets-ом), он тоже грузит свои скрипты и стили с пустыми настройками frontend_css и frontend_js, но с включенным enable_editor в положении 'да', и никак это побороть нельзя.
Придётся отключить этот редактор «markltUp» в комментариях, блин.
Во-первых в случае принятия кода — можно смело заявлять что входишь в число разработчиков ms2 — и даже показывать ссылку на список контрибьютеров компонента.
Во-вторых необходимость предложить свой код заставит включить голову и сделать это максимально качественно.
В третьих — github позволяет работать над кодом совместно, получать код ревью от более опытных товарищей и самому становиться более опытным.
Проверьте путь на опечатки.
Проверьте права на запись у этой папки (может ли пользователь, из-под которого запускается php, записывать в неё).
miniShop2Config, а также можно обвернуть в условие. Или как в примере выше добавить конфиги.
По поводу Тут лучше дождаться ответа разработчика, так как путь assets/components/minifyx/cache обычно идёт по умолчанию, возможно погрешность с вашей стороны или установлен кэш. Логируйте ошибки в журнал и смотрите, что там не так. Да, и ещё указывать из /assets/cache/ нельзя, так как это временная папка, которая очищается.