MinifyX ​

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

Параметры ​

Кэш ​

Во время работы компонента все готовые файлы кэшируются в директорию, указанную в системной настройке 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`
]]

[[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`
]]

[[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]]

[[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]]

Если вы собираете сайта на шаблонизаторе Fenom, тогда вызов будет следующим:

{'!MinifyX' | snippet : [
  'minifyCss' => 1,
  'minifyJs' => 1,
  'jsSources' => '
    assets/plugins/jquery/jquery-2.1.4.min.js,
    assets/js/scripts.js
  ',
  'cssSources' => '
    assets/plugins/bootstrap/css/bootstrap.min.css,
    assets/css/essentials.css,
    assets/css/layout.css,
    assets/css/header-1.css,
    assets/css/color_scheme/green.css
  '
]}
{$_modx->getPlaceholder('MinifyX.css')}
{$_modx->getPlaceholder('MinifyX.javascript')}

{'!MinifyX' | snippet : [
  'minifyCss' => 1,
  'minifyJs' => 1,
  'jsSources' => '
    assets/plugins/jquery/jquery-2.1.4.min.js,
    assets/js/scripts.js
  ',
  'cssSources' => '
    assets/plugins/bootstrap/css/bootstrap.min.css,
    assets/css/essentials.css,
    assets/css/layout.css,
    assets/css/header-1.css,
    assets/css/color_scheme/green.css
  '
]}
{$_modx->getPlaceholder('MinifyX.css')}
{$_modx->getPlaceholder('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'
  ],
];

<?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`
]]

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

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

<?php

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

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