MODX. Компонуем файлы и уменьшаем скорость загрузки с помощью MinifyX

Компонент предназначен для чистки и склейки разных css и js файлов в один файл, для ускорения загрузки у пользователей сайта. 

Обратите внимание, что на разных репозиториях могут быть разные версии компонента. 

Компонент может ломать некоторые стили, на современны сайтах лучше использовать файлы созданные силами node.js

Используя MinifyX стоит быть внимательным, если в коде указан неверный путь до файла, или файл отсутствует на сервере, перестают работать все файлы, подключаемые с помощью этого компонента.

Пример вызова:

Fenom
Теги MODX
{'!MinifyX' | snippet : [
  'minifyCss' => 1,
  'minifyJs' => 1,
  'cssSources' => '/inc/css/bootstrap.css,' ~
                  '/inc/css/bootstrap-responsive.css,' ~
                  '/inc/css/font-awesome.css,' ~
                  '/inc/css/custom-fonts.css,'~
                  '/inc/css/style.css',
  'jsSources'  => '/inc/js/bootstrap.min.js,' ~
                  '/inc/js/jquery.form.js,' ~
                  '/inc/js/scripts.js'
]}

{$_modx->getPlaceholder('MinifyX.css')}
{$_modx->getPlaceholder('MinifyX.js')}
[[MinifyX?
	&minifyCss=`1`
	&minifyJs=`1`
	&registerJs=`default`
	&registerCss=`default`
	&jsSources=`
		/inc/js/bootstrap.min.js,
		/inc/js/jquery.form.js,
		/inc/js/scripts.js,
	`
	&cssSources=`
		/inc/css/bootstrap.css,
		/inc/css/bootstrap-responsive.css,
		/inc/css/font-awesome.css,
		/inc/css/custom-fonts.css,
		/inc/css/style.css
	`
]]
[[+MinifyX.css]]
[[+MinifyX.javascript]]

Документация

Сниппет

03 мая 2019, 07:00

MinifyX

Автоматизированное сжатие и кэширование скриптов и стилей сайта.

Параметры

Название Описание
&cssFilename Префикс или полное имя скомпилированного CSS файла. По-умолчанию указан префикс «styles».
&cssGroups Названия групп стилей (через запятую).
&cssPlaceholder Имя плейсхолдера css. Используется, если &registerCss=`placeholder`. По-умолчанию «MinifyX.css».
&cssSources Список CSS файлов для обработки. Можно указывать «*.css», «*.less» и «*.scss».
&cssTpl Шаблон для скомпилированного файла стилей. Должен быть указан плейсхолдер [[+file]]. По-умолчанию «<link rel="stylesheet" href="[[+file]]">».
&forceUpdate Отключить проверку изменения файлов и генерировать новые скрипты и стили каждый раз.
&hooks Список хуков через запятую для обработки полученного результата. Укажите имя сниппета или файла с расширением.
&jsFilename Префикс или полное имя скомпилированного JS файла. По-умолчанию указан префикс «scripts».
&jsGroups Названия групп скриктов (через запятую).
&jsPlaceholder Имя плейсхолдера javascript. Используется, если &registerJs=`placeholder`. По-умолчанию «MinifyX.javascript».
&jsSources Список JS файлов для обработки. Можно указывать «*.js» и «*.coffee».
&jsTpl Шаблон для скомпилированного файла скриптов. Должен быть указан плейсхолдер [[+file]]. По-умолчанию «<script type="text/javascript" src="[[+file]]"></script>».
&minifyCss Включает минификацию CSS. По-умолчанию отключена.
&minifyJs Включает минификацию JS. По-умолчанию отключена.
&preHooks Список хуков через запятую для предварительной обработки. Укажите имя сниппета или файла с расширением.
&registerCss Подключение сss: «placeholder» - сохранить в плейсхолдер, «default» - подключить в теге <head>, «print» - подключить в месте вызова сниппета. По-умолчанию, «placeholder».
&registerJs Подключение javascript: «placeholder» - сохранить в плейсхолдер, «startup» - подключить в теге <head>, «default» - разместить перед закрывающим <body>, «print» - подключить в месте вызова сниппета. По-умолчанию, «placeholder».

Кэш

Во время работы компонента все готовые файлы кэшируются в директорию, указанную в системной настройке minifyx_cacheFolder. По умолчанию она находится в директории assets компонента.

Если вы указываете собственную директорию, то будьте внимательны - Minifyx будет удалять все файлы в ней. Всегда используйте отдельную пустую директорию для готовых файлов!

Группы

Для удобства файлы скриптов и стилей можно объединять в группы. Группы указываются в файле core/components/minifyx/config/groups.php.

Хуки

Хуки - это сниппеты или файлы, которые позволяют выполнять необходимые манипуляции в процессе обработки файлов. Файловые хуки должны находится в папке core/components/minifyx/hooks.

Хуки бывают 2-х типов — хуки предварительной обработки и хуки пост обработки. Они указывают в параметрах «preHooks» и «hooks» соответственно. В прехуках можно добавлять группы и файлы. В постхуках изменять имя сформированного кэш-файла и его содержимое, что может пригодиться для дополнительной обработки полученного результата. Например, распарсить плейсхолдер MODX.

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

Методы для работы в прехуках

  • addCssGroup('строка или массив') - добавить группу в список групп стилей.
  • addJsGroup('строка или массив') - добавить группу в список групп скриптов.
  • addCssSource('строка или массив') - добавить файл в список источников стилей.
  • addJsSource('строка или массив') - добавить файл в список источников скриптов.
  • setCssGroup('строка или массив') - заменить список групп стилей.
  • setJsGroup('строка или массив') - заменить список групп скриптов.
  • setCssSource('строка или массив') - заменить список файлов стилей.
  • setJsSource('строка или массив') - заменить список файлов скриптов.
  • getCssGroup('название группы') - получить указанную группу или все группы стилей.
  • getJsGroup() - получить указанную группу или все группы скриптов.

Методы для работы в постхуках

  • isCss() - true, если компилируется css файл.
  • isJs() - true, если компилируется javascript файл.
  • getContent() - получить содержимое скомпилированного файла.
  • setContent($content) - заменить содержимое скомпилированного файла.
  • setFilename($filename) - заменить название файла.
  • getFileUrl() - получить полный URL скомпилированного файла.
  • getFilePath() - получить путь к скомпилированному файлу.

Примеры

Вывод сниппета с регистрацией стилей перед </head> и скриптов перед </body>

[[MinifyX?
    &minifyCss=`1`
    &minifyJs=`1`
    &registerCss=`default`
    &registerJs=`default`
    &cssSources=`
        assets/templates/himyf/css/normalize.css,
        assets/templates/himyf/css/foundation.css,
        assets/templates/himyf/css/font-awesome.css,
        assets/templates/himyf/css/app.css
    `
    &jsSources=`assets/templates/himyf/js/foundation.js`
]]

Для удобства можно создать набор параметров, в котором указать первые 4 параметра как в примере выше, и назвать его MinifyDefault (т.е. минифицировать и регистрировать в режиме default). Тогда вызов будет выглядеть так:

[[MinifyX@MinifyDefault?
    &cssSources=`
        assets/templates/himyf/css/normalize.css,
        assets/templates/himyf/css/foundation.css,
        assets/templates/himyf/css/font-awesome.css,
        assets/templates/himyf/css/app.css
    `
    &jsSources=`assets/templates/himyf/js/foundation.js`
]]

Вывод в плейсхолдеры

Если указан режим вывода в плейсхолдеры, то скомпилированный файл стилей будет сохранён в плейсхолдере, указанном в параметре &cssPlaceholder (по-умолчанию MinifyX.css), а файл скриптов соответственно в плейсхолдере, указанном в параметре &jsPlaceholder (по-умолчанию MinifyX.javascript).

[[MinifyX?
    &minifyCss=`1`
    &minifyJs=`1`
    &cssSources=`
        assets/templates/himyf/css/normalize.css,
        assets/templates/himyf/css/foundation.css,
        assets/templates/himyf/css/font-awesome.css,
        assets/templates/himyf/css/app.css
    `
    &jsSources=`assets/templates/himyf/js/foundation.js`
]]
[[+MinifyX.css]]
[[+MinifyX.javascript]]

Использование групп

Файл groups.php.

<?php

return [
    'baseCss' => [
       '[[+assets_url]]templates/himyf/css/normalize.css',
    '{assets_url}templates/himyf/css/foundation.css',
    'assets/templates/himyf/css/font-awesome.css',
    'assets/templates/himyf/css/app.css'
    ],
    'baseJs' => [
        'assets/templates/himyf/js/foundation.js',
        '{assets_url}templates/himyf/js/scripts.js'
    ],
];

Вызов сниппета

[[MinifyX?
    &minifyCss=`1`
    &minifyJs=`1`
    &registerCss=`default`
    &registerJs=`default`
    &cssGroups=`baseCss`
    &jsGroups=`baseJs`
]]

Пример прехука, добавляющего необходимые скрипты и стили для тикетов

<?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");
}

Пример постхука, исправляющего проблему с единицами измерения vmax и vmin

<?php

if ($MinifyX->isCss()) {
    $data = preg_replace('#vm (ax|in)#', 'vm$1', $MinifyX->getContent());
    $MinifyX->setContent($data);
}

Этот хук уже входит в пакет и называется fixVm. Также из коробки есть хук cssToPage, который регистрирует содержимое файла стилей прямо на страницу. Найти эти хуки можно в папке core/components/minifyx/hooks.

?
Была ли статья полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1