"компилятор" JavaScript.
Все это подгружается как синхронно, так и асинхронно. Вопрос. Не хочу так как у битрикса:
<style type="text/css" media="all">
/*<![CDATA[*/
@import "/css/index.css";
/*]]>*/
</style>
<!--[if !IE6]>
<style type="text/css" media="all">
/*<![CDATA[*/
@import url(/css/ie6.css);
/*]]>*/
</style>
<![endif]-->
<!--[if !IE7]>
<style type="text/css">
/*<![CDATA[*/
@import url(/css/ie7.css);
/*]]>*/
</style>
<![endif]-->
<link href="/bitrix/js/main/core/css/core.css?1318489165" type="text/css" rel="stylesheet" />
<link href="/bitrix/templates/alliance/components/bitrix/news.list/alliance_special_home/style.css?1232007055" type="text/css" rel="stylesheet" />
<link href="/bitrix/templates/alliance/components/bitrix/news.list/alliance_news_home/style.css?1190810720" type="text/css" rel="stylesheet" />
<link href="/bitrix/templates/alliance/styles.css?1226067730" type="text/css" rel="stylesheet" />
<link href="/bitrix/templates/alliance/template_styles.css?1226067730" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/bitrix/js/main/core/core.js?1318489152"></script>
<script type="text/javascript">BX.message({'LANGUAGE_ID':'ru','FORMAT_DATE':'DD.MM.YYYY','FORMAT_DATETIME':'DD.MM.YYYY HH:MI:SS','COOKIE_PREFIX':'BITRIX_SM','bitrix_sessid':'9eaba9540fdfd93c8dee07d890fde832','JS_CORE_LOADING':'Загрузка...','JS_CORE_WINDOW_CLOSE':'Закрыть','JS_CORE_WINDOW_EXPAND':'Развернуть','JS_CORE_WINDOW_NARROW':'Свернуть в окно','JS_CORE_WINDOW_SAVE':'Сохранить','JS_CORE_WINDOW_CANCEL':'Отменить','JS_CORE_H':'ч','JS_CORE_M':'м','JS_CORE_S':'с'})</script>
<script type="text/javascript" src="/bitrix/js/main/core/core_ajax.js?1318489152"></script>
<script type="text/javascript" src="/bitrix/js/main/session.js?1318488673"></script>
Хочу как на codenet.ru:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js "></script>
Один или два js файла в котором все собрано и минифицировано и один css файл. Но в процессе разработки хочу чтобы это было раскидано по модулям с соблюлением структуры и логики. Вопрос не столько в минификации, сколько в сборке.
Наверняка ведь есть такие решения.
ЖС- http://code.google.com/closure/compiler/ вроде этот у меня..
Да - это реально ВЕЩЬ! Сам пользую, самое удобное именно ф-ция АПИ.. Т.е. к примеру на Фидбаке у меня есть пхп код, который выпускает новую версию каждый раз.
Сам хтмл файл выглядит так:
[HTML]/^ PRODUCTION ^/
<LINK href="{:TEMPL_PATH}style/compiled.css" type="text/css" rel="stylesheet">
/^ PRODUCTION ^/
/^ DEBUG ^/
<!-- COMBINED CSS -->
<LINK href="{:TEMPL_PATH}style/style.css" type="text/css" rel="stylesheet">
<LINK href="{:TEMPL_PATH}style/Home.css" type="text/css" rel="stylesheet">
<LINK href="{:TEMPL_PATH}style/Wall.css" type="text/css" rel="stylesheet">
<LINK href="{:TEMPL_PATH}style/User.css" type="text/css" rel="stylesheet">
<LINK href="{:TEMPL_PATH}style/Pic.css" type="text/css" rel="stylesheet">
<!-- END COMBINED CSS -->
/^ DEBUG ^/
<script>
document.SDFullPath = '{THE_HOST}CalyptoEngine/Extensions/SDTable/';
document.SDImgPath = document.SDFullPath + "lib/Table/i/";
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
/^ DEBUG ^/
<!-- SCRIPTS -->
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.em.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jdmenu/jquery.clickmenu.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/js/jquery.ui.selectmenu.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/js/autoresize.jquery.min.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/js/jquery.timeago.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.json-2.3.min.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.flot.min.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.corner.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}scripts/Ajax.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/ControlBar/ControlBar.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}scripts/Window/Handlers/CookieHandler.js" ></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/sdt_global.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/Shirm/SShirm.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/Shirm/Helper.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/PicCom/PicCom.js?{rand}"></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/Wall/Wall.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}JPlugin/User/User.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}main.js"></script>
<!-- END SCRIPTS -->
<!-- SDTABLE -->
<script type="text/javascript"> document.write(unescape("%3Cscript src='{:HTTP_PATH}index.php?__system_name={system_name}&comp=SDTable::js' type='text/javascript'%3E%3C/script%3E"));</script>
/^ DEBUG ^/
/^ PRODUCTION ^/
<script type="text/javascript" src="{:TEMPL_PATH}compiled.min.js"></script>
/^ PRODUCTION ^/
<!-- NO COMPILE -->
<script type="text/javascript" src="{:TEMPL_PATH}jquery/tree/jquery.jstree.js"></script>
<script type="text/javascript" src="{:TEMPL_PATH}jquery/colorpicker/js/colorpicker.js"></script>
[/HTML]
Что происходит после запуска скрипта я думаю уже догадаться не сложно.
хм.. ну уменя php-шный таск для минификации и конкетинации. конкетинирую уже в пхп. так как задача разовая, не вижу в ней проблемы
define("CM_PATH", "/var/www/feedback/v/production/");
$dir = '/var/www/feedback/v/production/Templates/default/';
$top_file=file_get_contents($dir.'index.html');
$A = explode('<!-- SCRIPTS -->', $top_file);
$B = explode('<!-- END SCRIPTS -->', $A[1]);
$CA = explode('<!-- COMBINED CSS -->', $top_file);
$CB = explode('<!-- END COMBINED CSS -->', $CA[1]);
$the_big_file = '';
$the_big_css_file = '';
$scripts = explode("\n", $B[0]);
$csss = explode("\n", $CB[0]);
foreach ($scripts as &$s) {
$s = trim($s);
if(!$s) continue;
print $s;
preg_match('/\{:TEMPL_PATH\}([^"]*)\.js/', $s, $m);
print $dir.$m[1].".js<BR>";
$the_big_file .= file_get_contents($dir.$m[1].".js");
}
foreach ($csss as &$s) {
$s = trim($s);
if(!$s) continue;
print $s;
preg_match('/\{:TEMPL_PATH\}([^"]*)\.css/', $s, $m);
print $dir.$m[1].".css<BR>";
$the_big_css_file .= file_get_contents($dir.$m[1].".css");
}
$the_big_css_file = preg_replace("/\/\*([^\*]*)\*\//", "", $the_big_css_file);
$the_big_css_file = preg_replace("/\n|\r|\t/", "", $the_big_css_file);
file_put_contents('/var/www/feedback/v/production/Templates/default/style/compiled.css', $the_big_css_file);
$dir = CM_PATH.'CalyptoEngine/Extensions/SDTable/';
$top_file=file_get_contents($dir.'lib/Table/SDTable.js');
preg_match_all('/lib\/([^"]*)\.js"/', $top_file, $m);
$a = explode('/** --- **/',$top_file,2);
$the_big_file .= $a[1];
foreach ($m[0] as &$v) {
$v = preg_replace('/\"$/', '',$v);
print $v."<BR>";
$the_big_file .= file_get_contents($dir.$v);
}
//print $the_big_file;
print $dir;
file_put_contents('/var/www/feedback/v/production/Templates/default/compiled6.js', $the_big_file);
$params = array('http' => array(
'method' => 'POST',
'content' => 'code_url='.urlencode('http://www.feedbackme.org/v/production/Templates/default/compiled6.js').'&compilation_level=SIMPLE_OPTIMIZATIONS&output_format=text&output_info=compiled_code'
));
$ctx = stream_context_create($params);
$fp = @fopen('http://closure-compiler.appspot.com/compile', 'rb', false, $ctx);
if (!$fp) { throw new Exception("Problem with $php_errormsg"); }
$response = @stream_get_contents($fp);
file_put_contents('/var/www/feedback/v/production/Templates/default/compiled.min.js', $response);
?>
Это решение применимо только до определенного уровня сложности. Когда количество модулей идет на сотни, так уже за всем не уследить.
а подключать CSS файлы и JavaSript по мере подключеня модулей
а не в разделе head это очень плохо
Давно вопрос мучает...
а подключать CSS файлы и JavaSript по мере подключеня модулей
а не в разделе head это очень плохо
Давно вопрос мучает...
CSS - плохо, [2]
JS - можно
на CSS есть хаки, в виде добавления тэга <link> к <head> посредством JS (через document.createElement или $('<link />').attr({....}).appendTo($("head")); или document.createStyleSheet(); (последнее только для IE))
В смысле каждый раз? Компилируется один раз перед релизом каждой версии.. Опять же с примера фидбака. Есть папочка "production" - в ней я кодю, эксперементирую. Специальный субдомен туда ведет...
Запускаю компилятор - и он выплевывает папочку 1.6, с уже сжатыми ЖаваСкриптом и ЦСС. Ее проверяю. .Если все ок, в файлике меняю номер версии и вуаля, все довольны...
Но правда у меня ОДИН, шапочный html файл на все модули. В модульных ХТМЛах нету ни подгрузок Цсс ни Жаваскриптов.
ПС... У меня кстати количество модулей идет за сотни... Не на фидбаке, на другом проекте по ERP системе.. И очень, очень, очень удобно... А главное - просто =)
"модульных ХТМЛах"
будут использованы ты не знаешь
В моем случае (с чертовски динамическими системами) он выгоден. на ERP к примеру один сжатый js файл весит 800 кб.. Но как факт - я на долбаном 3G, где-то в полюшке, запускаю систему.. Она загружается (целостно) за 2-3 секунды, а потом летает как белка под редбулом, и я спокойно создаю фактуры, клиентов, ордера. И мои клиенты уже в шоке насколько круто это у меня работает =)
Едит:
На самом деле это ни так... Использоваться будет ВСЕ, рано или поздно.. Не значит, что сразу. Но файл уже будет скачан и закеширован, по сути до следующего релиза (у меня жестко с кешом прописано... не обновлять! ибо нет смысла). И получается, что пкоа я не выпущу новую версию программы, пользователь будет пользоваться двумя, однажды скачанными файлами...
:facepalm: Если честно, то первая реакция.. "Ну нафига так заморачиваться..."
Но если такое требует базис проекта, значит надо готовить разные сжатые js =)
Ни что вам не мешает создать 2-3 файла как вам угодно, туда напихать куче импортов (это чтобы ХТМЛ парсер не пришлось использовать)... А потом при релизе, просто импорты пересжимать
Т.е. в драфт версии к примеру css выглядит:
@import('module1.css')
@import('module2.css')
@import('module3.css')
А в продакшине - после компилятора уже с компилированным кодом всех импортов...
Мне просто не надо так заморачиваться, поскольу все ХТМЛЫ у меня через парсер движка проходят
@import('module1.css')
@import('module2.css')
@import('module3.css')
Мне просто не надо так заморачиваться, поскольу все ХТМЛЫ у меня через парсер движка проходят
Хороший вариант. Только вот условий не поддерживает.
на CSS есть хаки, в виде добавления тэга <link> к <head> посредством JS (через document.createElement или $('<link />').attr({....}).appendTo($("head")); или document.createStyleSheet(); (последнее только для IE))
Не надо... не хаки это. И уж тем более не CSS. Это DOM, вполне себе нормальный и даже стандартизированный механизм.
В стандартах w3c об этом ничего нет, так что это хак. В официальной доке есть только это, что позволяет добавлять стили в ходе выполнения, но не подгружать их из других файлов. Поправьте, если я ошибаюсь, но других официальных доков я не нашёл. Да и по логике, в доке на стили есть строка "If two or more LINK elements specify a preferred style sheet, the first one takes precedence." то есть, как я понимаю, если подключить во время выполнения новый файл, определяющий те же стили, то он не должен ничего изменить.
Повторюсь еще раз. Использование createElement или каких либо других свойств/методов из DOM это не хак. Это нормальный стандартный механизм реализуемый через имплементацию DOM в JavaScript-е. Не хак это, не хак.
По идее так это - "hack" первоначальной структуры CSS сайта средствами DOMа. И ничего в этом плохого нетус =) В одном моем проекте так на ура работает (когда темплатес ДОМ элемента задается опцией, и в зависимости от нее, подгружаются разные стили)
Ничуть. Тут нет спора, я просто указываю на заблуждение с целью его опровергнуть. Форум - публичное место. Коднет достаточно старый ресурс что бы в поисковой выдаче быть высоко. И мне не хочется, что бы менее искушенные люди почитав тему решили "о, это не нужно использовать, это хак". В интернетах и так с инфой проблема, так что не нужно это усугублять. Право слово не стоит.
С этим и правда не поспоришь. Все зависит от понимания слова "хак"
Если к этому относится так : "о, это не нужно использовать, это хак", то CSS через DOM, это не ХАК! Пользуйтесь на здоровье! =)
Если к "хаку" относится более правильно, а именно как "к внедренному коду, который изменяет! (не хорошо или плохо, а просто изменяет) общую структуру программы" - то CSS через DOM, это самый настоящий хак. И опять же - Пользуйтесь на здоровье! +)
А вот это у тебя уже пошло мороженное.
А) "Хак" и DOM - это две разные вещи и друг другу не противоречат. Т.е. говорить что "Это НЕ хак - это ДОМ" или "Это не ДОМ - это Хак" в корне не верно. Ибо это два индигриента одного салата.
Б) Что донести людям правильное понимание слово "хак" полезнее чем, избегать этого слова потому что: "о, это не нужно использовать, это хак". Ибо "ХАК" - не есть зло, а мощный инструмент в руках праведного и неправедного кодера.
Хмм... Тогда видимо придется уточнить - в рунете это объективно плохо. В Швеции же, Хак - объективно рассматривается как инструмент: не хорошо и не плохо.
А) "Хак" и DOM - это две разные вещи и друг другу не противоречат. Т.е. говорить что "Это НЕ хак - это ДОМ" или "Это не ДОМ - это Хак" в корне не верно. Ибо это два индигриента одного салата.
Ай-яй-яй... Передергивать, вырывать из контекста... как нехорошо то. Прямо троллинг.
http://forum.codenet.ru/threads/69195-компилятор-JavaScript.?p=362449&viewfull=1#post362449
http://forum.codenet.ru/threads/69195-компилятор-JavaScript.?p=362449&viewfull=1#post362449
не, ну я действительно считаю, что это хак)) не зря же к head через innerHTML нельзя обращаться, не зря document.createStyleSheet только в ие есть, не зря стили пишутся только в head) и заметьте, у того же jQuery высокоуровневый интерфейс .load есть, .get есть, .getScript есть, а .getCSS нету и работа с CSS только динамическим добавлением к существующим на момент загрузки стилям, а не подгрузка новых. ок, может быть это и не хак в полном смысле, но так делать не стоит)
document.createStyleSheet хак потому как работает только в IE. Но при этом не хак CSS. Потому что есть в CSS просто не существует. А первоначально упомянутый createElement хаком считаться не может. Он часть спецухи. Поэтому подгрузка стилей, других элементов их модификация через DOM при следовании спецухи не хаки.
но скрипт я могу подгрузить, написав, например $('body').html("<script src="somescript.js"></script>");, а CSS - нет, обращаться к $('head').html() нельзя. Получается, что не все DOM-методы работают для подгрузки CSS. А те что работают - хак)))
Ох уж эти фрейморвки... JQuery поди да? Писать на нативном JavaScript порой бывает сильно конструктивнее.
Рулить стилями страницы без хаков возможно: http://www.w3.org/TR/DOM-Level-2-Style/css.html . На фроте не кодю этак уже пару лет, но даже тогда это было вполне возможно. Ну а для разных недобраузеров да, можно заюзать хак. Но это не хаки CSS, это просто работа с нестандартным DOM API не более.
Рулить стилями страницы без хаков возможно: http://www.w3.org/TR/DOM-Level-2-Style/css.html . На фроте не кодю этак уже пару лет, но даже тогда это было вполне возможно. Ну а для разных недобраузеров да, можно заюзать хак. Но это не хаки CSS, это просто работа с нестандартным DOM API не более.
ну в нативном элемента document.head нету, в отличие от document.body. но смысл, что написать и на нативном document.documentElement.children[0].innerHTML нельзя, хотя кое-где сработает))
А в доке, что вы дали (кстати спасибо за неё) написано: "There is no way to associate the new CSSStyleSheet with a document in DOM Level 2." да и у Interface DocumentStyle styleSheets of type StyleSheetList, readonly.
А в доке, что вы дали (кстати спасибо за неё) написано: "There is no way to associate the new CSSStyleSheet with a document in DOM Level 2." да и у Interface DocumentStyle styleSheets of type StyleSheetList, readonly.
Конструкции вида document.body это "полуофициальный" DOM Level 0.
В доке не только это написано. Нам шашечки или ехать? Цель добавления нового CSS файла это добавление новых правил на текущую страницу, так? Ну вот DOM Level 2 зафичить новый CSS файл не даст, а вот рулить правилами даст. Собственно что и требуется обычно.
так именно это я и пытаюсь сказать. Вообще я изначально отвечал на этот вопрос))
раз пост последний, добавлю. Ссылка на msdn, где прямо написано "you cannot use innerHTML to inject into the HEAD or STYLE element directly." В отличие от <script>
Я в курсе ;) Но я обращаю внимание на формулировку. "на CSS есть хаки". Согласись, что даже для случая с IE, где это действительно хак, это не CSS.
