2010-12-08 2 views
3

У меня есть сайт, который использует много jquery/javascript. Теперь на странице индекса У меня есть около 10 файлов JavaScript включены в голове:Автоматизация миниатюр 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-запрос. Я сделал это. Теперь у меня есть файл everything.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> 

Веселье начинается, когда мне нужно внести изменения в один из файлов. Каждый раз, чтобы проверить, работают ли мои изменения как ожидалось, мне нужно сжать файл и обновить everything.js или раскомментировать весь старый код. С таким видом работы слишком легко забыть что-то и сделать ошибку.

Вопрос: есть автоматическая вещь, которая может отнять эту головную боль? Что-то, что позволило бы мне редактировать мои отдельные файлы, как я привык, и будет минимизировать и собрать все, когда я буду проверять свои изменения?

Я использую PHP5 и SVN

РЕШЕНИЕ

Спасибо за вашу помощь, все, я нашел мое решение: вложу post-commit крюк в моей SVN репо, который будет принимать все мои файлы .js, объедините их и уменьшите их с помощью компрессора YUI. Затем в моем сценарии я буду использовать fork javascript, так что в среде разработки сайт будет содержать отдельные файлы javascript, но в процессе будет включен комбинированный и мини-файл.

+0

Вы можете написать сценарий оболочки, который сделает это за вас, собирая все файлы .js в определенном каталоге, затем расчесывая и сжимая результат. – Gumbo 2010-12-08 10:12:58

+0

Я думаю, вы должны проверить, работают ли ваши скрипты нормально, когда они находятся в одном файле. – 2010-12-08 10:13:30

ответ

5

У нас есть специальный скрипт развертывания, который позаботится об этом. Короче говоря, он минимизирует все файлы 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 

Мы подобно этому подходу, поскольку он не требует какого-либо дополнительного кода, который должен обрабатываться «на лету». Это всего лишь вопрос развертывания, который происходит раз в две недели до производства. Наша промежуточная среда обновляется каждый день, иногда даже более одного раза в день, и у нас пока не было проблем.

-1

создать PHP-файл, как это и сохранить его как merger_js.php в ваших JS реж

<?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 M Y H: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 (обычно это устанавливается по умолчанию)

Надеется, что это помогает

+1

Где слияние? – Gumbo 2010-12-08 10:14:50

1

Я думаю, что вы должны проверить, если ваши сценарии работают нормально, когда они находятся в одном файл, а затем сжать этот файл. У нас не так много файлов, поэтому мы используем js minifier для каждого файла, используя yui compressor. Если вы используете автоматическое развертывание, вы должны выполнить минимизацию, а затем развертывание, в противном случае пакетный скрипт должен быть в порядке.

Смежные вопросы