[EVO] CssJs - Альтернатива MinifyX для объединения и сжатия файлов

Почему не нравиться MinifyX?
— Долго устанавливать,
— Снипет + Плагин + Модуль — как то слишком много всего для простого действия

Итого решил написать свое решение что б все было максимально просто.

[!css? &files=`
	assets/templates/site/css/style.css,
	assets/templates/site/css/dop-style.css,
	assets/templates/site/css/jquery.bxslider.css,
	assets/templates/site/css/jquery.mCustomScrollbar.css,
	assets/templates/site/css/filter.css
` &minify=`1`!]

результат:
<link rel="stylesheet" href="/styles.min.css?v=f6d">

Если отключить minify то результат будет таким:
<link rel="stylesheet" href="/assets/templates/site/css/style.css?v=f6d">
<link rel="stylesheet" href="/assets/templates/site/css/dop-style.css?v=907"><link rel="stylesheet" href="/assets/templates/site/css/jquery.bxslider.css?v=c1f">
<link rel="stylesheet" href="/assets/templates/site/css/jquery.mCustomScrollbar.css?v=c1f">
<link rel="stylesheet" href="/assets/templates/site/css/filter.css?v=09d">	


Тоесть в любом случае у нас есть версия файла (что б если поменяли что то то автоматом обновлялся кеш:) + при отключенном minify проще править код

Пока работает только сниппет CSS

Из планов:
— Сделать рабочей версию для JS
— Добавить обработку LESS
— Добавить обработку SASS

Донатить можно тут: modx.com.ua/thanks.html
Помогать можно тут: github.com/dmi3yy/CssJs
Скачать можно тут: github.com/dmi3yy/CssJs

После тестирования и доработок появиться в Extrass

27 комментариев

avatar
Сделал Js теперь тоже работает :)
Следующий шаг это Less
avatar
Поставил, полет нормальный.
Комментарий отредактирован 2014-10-20 12:32:36 пользователем dave
  • dave
  • 0
avatar
Круто! Очень SASS не хватает
avatar
avatar
Спасибо! Все чудесно работает.
Правда заменил phamlp на чистый phpsass github.com/richthegeek/phpsass

Только не хватает подсветки синтаксиса в Ace.
SCSS подсвечивается, а SASS нет. Пытался приделать, но что-то так и не заработало. У кого-нибудь есть решение/инструкция?
avatar
Проблема этого расширения в том, что css и js не кешируются и постоянно грузятся юзером. Если посмотреть на работу старой версии MinifyX, которая аналогично работает без всяких изощрений, то в конце названия файлов он ставит _микротайм.
avatar
А с чего вы взяли что он не кешируется?

Если не минифицировать то он ставит версию что собственно актуально в момент разработки

хотя в целом согласен можно и версию для минифицированной версии вывести
avatar
спасибо! работает.
avatar
Здравствуйте Дмитрий.
Замечательное решение, буду использовать обязательно.

Есть только одно сомнение: Василий Наумкин вот здесь писал:
Как оказалось, браузеры не кэшируют скрипты стили, если у них есть параметры в url, типа scripts.min.js?1234567890. А вот изображения с параметрами, почему то, прекрасно кэшируются.
В общем, пришлось переписать генерацию файлов так, чтобы timestamp был в имени — scripts_1234567890.min.js.
Правильно ли я понимаю, что в Вашем решении браузеры тоже не будут кешировать из-за параметров в
<link rel="stylesheet" href="/styles.min.css?v=f6d">
?
  • lex
  • 0
avatar
Да, но нужно учитывать что вызов сниппета кэшированный, то есть параметр &v будет меняться только при очистке кэша, что в общем-то логично.
avatar
Почитайте
Вот дословный ответ на ваш вопрос:
Но, насколько я слышал, есть некоторые прокси-сервера, которые при наличии гет-параметров не кешируют файл и _всегда_ запрашивают его с сервера
Ну и ответ от WEBO по теме
Некоторые прокси-серверы не кэшируют URL содержащий GET-параметры (т.е. такие URL, как в первом примере: styles.css?20091114).

Таким образом, если большое число пользователей попадает на сайт из сети, находящейся за прокси-сервером, каждый пользователь будет загружать файлы с GET-параметрами независимо, минуя кэширующий механизм прокси-сервера. Это может отразиться на скорости работы веб-сайта и даже привести к критическим ситуациям.
Комментарий отредактирован 2014-11-17 10:09:58 пользователем Agel_Nash
avatar
Получается, если мы хотим чтобы не измененные css и js файлы кэшировались и браузеры не запрашивали их при каждой загрузке — параметров в урле вообще быть не должно?
avatar
Типа того. Поэтому в MinifyX под Evo вообще нет GET параметров и при желании они добавляются самостоятельно через сниппет в стиле
return (empty($file) || !file_exists(MODX_BASE_PATH . $file)) ? '' : filemtime(MODX_BASE_PATH . $file);
avatar
Понятно, но ведь действительно очень не удобно и сниппет и плагин и модуль. А как Вам такое решение если например оформить его как сниппет? biznesguide.ru/coding/130.html.
а ведь там тоже параметры в урле. Надо как то от них избавляться.
Комментарий отредактирован 2014-11-17 10:49:58 пользователем lex
avatar
очень не удобно и сниппет и плагин и модуль
Модуль это лишь кнопка для принудительного обновления файла стилей и скриптов.

Плагин нужен лишь в том случае, если для стилей и скриптов вы создаете в дереве документов специальный ресурс.

Так что на самом деле, там все это и не нужно, как может показаться на первый взгляд. Нравится обходиться одним сниппетом? Пожалуйста.
Пример использования
[!Compress? &css=`css/style.css,js/jGrowl-1.3.0/jquery.jgrowl.min.css` &js=`js/script.js,js/custom.js`!]
<link rel="stylesheet" href="[+css.MinifyX+]">
<script src="[+js.MinifyX+]"></script>


Можно и дальше развивать без труда, но как-то нет спроса. А меня и старый подход устраивает.
avatar
Здесь получается не нужно запускать модуль после каждого редактирования css файлов я правильно понимаю?
avatar
Да.
avatar
О, это замечательно!
avatar
Когда отправите в репозиторий?
avatar
MinifyX есть в репозитории? Он уже умеет работать без модуля и плагина. И так же поддерживает отключение компрессии:
[!MinifyX? 
	&outFolder=`assets/templates/`
	&outJS=`v1.min.js`
	&outCSS=`v1.min.css`
	&CSSfile=`assets/templates/style.css,assets/js/fancybox/jquery.fancybox.css`
	&JSfile=`assets/js/jquery.cookie.js,assets/templates/example/style.js`
	&jsCompress=`1`
	&cssCompress=`1`
!]
//Ну и в верстке уже вставляете в любом удобном для вас месте
<link type="text/css" rel="stylesheet" href="/assets/templates/v1.min.css">
<script type="text/javascript" src="/assets/templates/v1.min.js"></script>
avatar
В репозитории старая версия или нет? Что-то в сниппете не встречается jsCompress и cssCompress.
avatar
словил проблему — перестал работать «Fancybox»
думаю причина в том, что файл генерируется в корень…
дебегер не показал ошибок…

буду искать варианты
avatar
пробовал так (но увы):
[!js? &files=`
        js/jquery.fancybox.min.js,
	js/jquery-ui-1.9.2.custom.min.js,
        js/jquery.selectbox.min.js,
        js/bxslider/jquery.bxslider.min.js,
				js/comm.js
` &folder=`js/` &minify=`1`!]
avatar
В Extras нету CssJs (хотя тут github.com/dmi3yy/CssJs написано ставить из Extras)
avatar
Судя по обсуждению, я не единственный, у кого возникла проблема с тем, что сжатие JS не включает некоторые файлы целиком, хоть и пишет файлы в общий список в заголовке результирующего CSS. Надо либо пофиксить библиотеку, идущую в комплекте со сниппетом class.magic-min.php, либо поменять ее на эту github.com/tedivm/JShrink/blob/master/src/JShrink/Minifier.php
а сам код файла assets/snippest/cssjs/snippet.js.php модифицировать так: gist.github.com/sashabeep/3b491c9ab55e49e634a1671b92321d47
avatar
никак нет ) я тоже словил пару сайтов без js
avatar
Форк с этим быстрофиксом github.com/sashabeep/CssJs — патчил только сжатие JS
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.