Сниппет

06 августа 2018, 11:31

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

Параметры

Название Описание
&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.