Я не знаю, как коротко и однозначно перевести с английского слово «assets». Но те, кто работают со всякого рода фреймворками или занимаются версткой, как правило, сталкиваются с этим термином. Он обычно (в данном контексте) означает наборы файлов, которые используются на HTML-странице – это файлы стилей (css), скрипты (javascript), различные изображения и шрифты. Нередко термином assets называют только наборы css- и js-файлов.Разумеется, эти «наборы» активно и в Альто используются. И в этой статье я расскажу о некоторых особенностях их обработки, которые присущи именно нашему движку. И это чрезвычайно будет полезно знать и тем, кто занимается версткой, и тем, кто будет писать плагины под движок, да и вообще всем, кто делает или собирается делать сайты на Alto CMS и хотел бы больше знать, как они устроены изнутри.
Общий подход при работе с css- и js-файлами
Основной подход – все css- и js-файлы собираются в папке /_run/assets/, там они (если это задано в настройках сайта), объединяются, и уже оттуда они подключаются в HTML-код.При объединении файлов может использоваться сжатие (минификация) – удаление лишних пробелов, переводов строк, комментариев и т.д.
Например, задано подключение файлов:
$config['head']['default']['css'] = array(
'___path.frontend.dir___/bootstrap-3/css/bootstrap.css',
'___path.skin.dir___/assets/css/default.css',
'___path.skin.dir___/themes/___view.theme___/style.css',
);Предположим, мы работаем со скином Start-Kit и у него выбрана тема red. Тогда в папку /_run/assets/ будут скопированы следующие файлы:
- /common/templates/frontend/ bootstrap-3/css/bootstrap.css
- /common/templates/skin/ start-kit/ assets/css/default.css
- /common/templates/skin/ start-kit/ themes/red/style.css
<link rel='stylesheet' type='text/css' href='http://site.com/_run/assets/106be19c/bootstrap.css' />
<link rel='stylesheet' type='text/css' href='http:// site.com /_run/assets/7204ad63/default.css' />
<link rel='stylesheet' type='text/css' href='http:// site.com /_run/assets/0abc6294/style.css' />Т.е. в общем случае принцип такой: css-, js- и прочие включаемые в HTML-код файлы не дергаются из сотни разных мест движка (шаблоны, плагины, библиотеки и т.д.), а должны быть аккуратно сложены в одну папочку /_run/assets/ и подключаться оттуда.
Важный нюанс: если у подключаемого файла указан не путь на диске, а веб-URL, то этот файл будет подключен в HTML-код без всякой обработки. Например, эти файлы будут подключены как есть:
$config['head']['default']['css'] = array(
'___path.frontend.url___/bootstrap-3/css/bootstrap.css', // указан URL к библиотеке фронтенда
'___path.skin.url___/assets/css/default.css', // указан URL к папке шаблона
'http://cdn.google.com/style.css', // указан внешний URL
);Объединение и сжатие
В настройках сайта задать опции для объединения и сжатия файлов. Это можно сделать либо в админке (Настройки сайта / CSS и javascript), либо добавив в конфиг-файл /app/config/config.local.php$config['compress']['css']['merge'] = true; // css-файлы будут объединяться
$config['compress']['css']['use'] = false; // если задано объединение, то они будут и сжиматься
$config['compress']['js']['merge'] = true; // js-файлы будут объединяться
$config['compress']['js']['use'] = false;// если задано объединение, то они будут и сжиматьсяПри подключении файлов могут задаваться и дополнительные опции.
$config['head']['default']['js'] = array(
// файл обрабатывается с опциями по умолчанию
'___path.frontend.dir___/libs/vendor/prettify/prettify.js',
'___path.frontend.dir___/libs/vendor/jquery-1.10.2.min.js' => array(
'name' => 'jquery', // указываем имя во избежании двойного подключения
'asset' => 'mini', // указывает на один набор при слиянии файлов
),
'___path.frontend.dir___/libs/vendor/swfobject/plugin/swfupload.js' => array(
'name' => 'swfobject/plugin/swfupload.js',
'prepare' => true, // файл только копируется в папку /_run/asset/, но не подключается
),
'___path.frontend.dir___/libs/vendor/swfupload/swfupload.swf' => array(
'name' => 'swfupload/swfupload.swf', // можно указывать файлы любых типов
'prepare' => true, // в HTML-не подключаем, просто копируем для дальнейшего использования
'merge' => false, // объединять не надо, даже если такая опция задана в конфиге
),
);$config['head']['default']['js'] = array(
'https://code.jquery.com/jquery-1.11.1.min.js' => array(
'name' => 'jquery', // указываем имя
'replace' => true, // если уже есть файл с name=jquery, то он будет замещен этим
),
);И у этого параметра (name) есть еще одно назначение — можно по нему получить URL к нужному файлу из javascipt'а на странице. Например:
<script>
$.ajax({
url: ls.getAssetUrl('swfobject/plugin/swfupload.js'),
dataType: 'script'
});
<script>Разработка и отладка
При разработке сайта (плагина, шаблона) есть необходимость сделать так, чтобы js- и/или css-файлы обновлялись при каждой загрузке страницы. Это задается в админке опцией принудительного обновления css- и js- (Настройки сайта / CSS и javascript) или указать это в конфиг-файле /app/config/config.local.php:$config['compress']['css']['force'] = true;
$config['compress']['js']['force'] = true;Есть и другой способ: в процессе разработки использовать URL (а не дисковый путь) к подключаемым файлам. Тогда они будут вставляться в HTML-код прямо с того места, где находятся, без всякой обработки. А когда разработка будет завершена, то вместо URL следует указать уже дисковый путь.
UPD Продолжение этой статьи: Работа с css- и js-файлами — дополнительные возможности для разработчиков шаблонов и плагинов
Кстати, если я изменю какой-либо файл, изменится ли путь к asset-у, в котором он состоит? Если да, то можно заставить браузер всегда брать файлы по этому пути из кэша — это сэкономит десятки запросов при каждом переходе по страницам:
Тогда можно будет, с одной стороны, получить автообновление с опциами по умолчанию, а с другой — отключить лишние проверки на рабочем проекте, когда известно, что ничего не меняется