У меня есть сайт, который использует много jquery / javascript. Теперь, на странице индекса, у меня есть около 10 файлов javascript, включенных в голову:
<head> <script src="/js/jquery.js"></script> <script src="/js/jquery_plugin_1.js"></script> <script src="/js/jquery_plugin_2.js"></script> <script src="/js/jquery_plugin_3.js"></script> <script src="/js/my_scripts_1.js"></script> <script src="/js/my_scripts_2.js"></script> <script src="/js/my_scripts_3.js"></script> <script src="/js/my_scripts_4.js"></script> <!-- ...and so on --> </head> Поскольку количество посетителей растет, я начинаю думать о выполнении всего этого. Я прочитал, что это хорошая идея, чтобы минимизировать все файлы javascript и собрать их вместе в одном, поэтому браузер должен сделать только один HTTP-запрос. Я сделал это. Теперь у меня есть файл all.js, содержащий все javascript, включая jquery, плагины и мои собственные скрипты.
<head> <!-- <script src="/js/jquery.js"></script> <script src="/js/jquery_plugin_1.js"></script> <script src="/js/jquery_plugin_2.js"></script> <script src="/js/jquery_plugin_3.js"></script> <script src="/js/my_scripts_1.js"></script> <script src="/js/my_scripts_2.js"></script> <script src="/js/my_scripts_3.js"></script> <script src="/js/my_scripts_4.js"></script> ... --> <script src="/js/everything.js"></script> </head>
Веселье начинается, когда мне нужно внести изменения в один из файлов. Каждый раз, чтобы проверить, работают ли мои изменения как ожидалось, мне нужно сжать файл и обновить all.js или раскомментировать весь старый код. С таким видом работы слишком легко забыть что-то и сделать ошибку.
Вопрос: есть ли автоматическая вещь, которая может отнять эту головную боль? Что-то, что позволило бы мне редактировать мои отдельные файлы, как я привык, и будет минимизировать и собрать все, когда я буду проверять свои изменения?
Я использую PHP5 и SVN
РЕШЕНИЕ
Спасибо за вашу помощь, все, я нашел свое решение: я поставлю post-commit в моем SVN-репо, который возьмет все мои .js файлы, объединит их и минимизирует с помощью компрессора YUI. Затем в моем сценарии я буду использовать fork javascript, так что в среде разработки сайт будет содержать отдельные файлы javascript, но в процессе будет включен комбинированный и мини-файл.
У нас есть специальный скрипт развертывания, который позаботится об этом. Короче говоря, он минимизирует все файлы CSS и JavaScript с помощью YUI Compressor и упаковывает их в два файла, один общий и другой с определенной логикой для данной страницы. После этого мы создаем символическую ссылку (или новую папку, в зависимости от проекта), в папку с упакованными файлами, и новые изменения распространяются мгновенно. Этот подход используется во всех средах, кроме разработки.
Перед минифинансом это то, что выглядит структура CSS (это более или менее одинаково для JavaScript, это просто дать вам идею):
css/Layout/Core/reset.css css/Layout/Core/index.css css/Layout/Tools/notice.css css/Layout/Tools/form.css css/Layout/Tools/overlay.css css/Skin/Default/Core/index.css css/Skin/Default/Tools/notice.css css/Skin/Default/Tools/form.css css/Skin/Default/Tools/overlay.css css/Layout/Tools/gallery.css css/Layout/Tools/comments.css css/Layout/Tools/pagination.css css/Layout/Index/index.css css/Skin/Default/Tools/gallery.css css/Skin/Default/Tools/comments.css css/Skin/Default/Tools/pagination.css css/Skin/Default/Tools/achievements.css css/Skin/Default/Tools/labels_main.css css/Skin/Default/Index/index.css
После:
minified/1290589645/css/common.css minified/1290589645/css/0135f148a7f6188573d2957418119a9a.css
Нам нравится этот подход, так как он не требует дополнительного кода для обработки «на лету». Это всего лишь вопрос развертывания, который происходит раз в две недели до производства. Наша промежуточная среда обновляется каждый день, иногда даже более одного раза в день, и у нас пока не было проблем.
Я думаю, вы должны проверить, работают ли ваши скрипты нормально, когда они находятся в одном файле, а затем сжимают этот файл. У нас не так много файлов, поэтому мы используем js minifier для каждого файла с помощью компрессора yui . Если вы используете автоматическое развертывание, вы должны выполнить минимизацию, а затем развертывание, в противном случае пакетный скрипт должен быть в порядке.
Честно говоря, я не сделал этого раньше, но я столкнулся с этими двумя решениями и подумал, что они могут вам помочь:
jMerge
Автоматическое слияние и управление версиями файлов CSS / JS с помощью PHP
Удачи!
создайте файл php, подобный этому, и сохраните его как merger_js.php в js dir
<?php ob_start ("ob_gzhandler"); $f=$_GET['f']; if(@file_exists($f)){ $inhoud = file_get_contents($f); header("Content-type: application/javascript; charset: UTF-8"); header("Cache-Control: must-revalidate"); $offset = 60 * 60 ; $ExpStr = "Expires: " . gmdate("D, d MYH:i:s", time() + $offset) . " GMT"; header($ExpStr); }else{ // file not found, we return empty $inhoud= ""; } print $inhoud;
вызовите свою java как это
<script type='text/javascript' src='js/merger_js.php?f=blackcan.js'></script>
Теперь ваш javascript-файл отправляется в браузер. Убедитесь, что сервер может обрабатывать gzip (обычно это устанавливается по умолчанию)
Надеюсь это поможет