Объединяем CSS и JS файлы

В продолжении темы сжатия CSS и JS файлов — можно добиться еще большей производительности при загрузки страницы, объединив между собой схожие по смыслу JS и CSS файлы. Если волею судьбы — во всех страницах проекта используются одни и те же JS файлы (либо все JS файлы в папке) — мы можем слепить их в один файл и к серверу будет меньше обращений в итоге.
Мы используем Jquery-UI? Так он не работает отдельно от Jquery. Давайте их объединим. Что? Используем timepicker? Так он как раз требует для запуска Jquery-UI? А, нам еще нужна русская локализация? Давайте все в один файл соберем и будет меньше обращений. Мы и раньше могли так делать вручную, но только если вдруг мы захотим версию обновить каждого из компонентов — нам придется снова все склеивать в едино.
Но как программа узнает, что эти файлы — нужно склеить именно между собой? Либо мы можем создать справочник, либо назвать эти файлы похожими названиями. Либо — склеить все файлы в папке в один. Мы рассмотрим 2 последних варианта, как наиболее простые. Собственно, магии здесь не будет, будет простая надстройка.
Для простоты — условимся максимальным числом частей из которых будет состоять файл. Допустим — 3. Если будет больше — просто добавим еще одну строчку. Можно конечно динамически все это проделать, но это сделать сложнее. Условимся что схожими файлами будут — pX.js на конце. Part 2, part 3 и т. д. Таким образом среди прочего мы задаем порядок файлов, т. к. некоторые скрипты нужно запускать в определенном порядке. Наш предыдущий код не сильно изменится

require '../jsmin.php';
if ($handle=opendir('.')){
	while(false !== ($file=readdir($handle))){
		if ($file == '.' or $file == '..' or is_dir($file)) continue;
		if (substr($file,-3) != '.js') continue;
		if (substr($file,-6) == '.p2.js') continue;
		if (substr($file,-6) == '.p3.js') continue;
		echo $file;
		$filename=substr($file,0,-3);
		$js=file_get_contents($file);
		if (file_exists($filename.'.p2.js'))$js.='
'.file_get_contents($filename.'.p2.js');
		if (file_exists($filename.'.p3.js'))$js.='
'.file_get_contents($filename.'.p3.js');
		$jscompress=JSMin::minify($js);
		file_put_contents($filename.'.jsgz',gzencode($jscompress,9));
	}
	closedir($handle);
}

Мы добавили строки, чтобы файлы pX игнорировались и чтобы при наличии такого файла — они объединялись начиная со следующей строки.
Хотите объединить все в один файл — задайте порядок, например по алфавиту, чтобы файлы не объединялись в разнобой и добавьте к каждому файлу цифру приоритета, например 1jquery.js, 2jquery-ui.js чтобы указать на приоритеты и не потерять смысл файла. В таком случае — нам нужно будет подключать только итоговый файл, например total.jsgz
Простые манипуляции, а сколько времени и ресурсов поможет нам сэкономить.
Для CSS – все выглядит аналогично. И порядок там тоже имеет значение, но не столь большое. Одно лишь исключение — в CSS – мы делали разбивку для старых браузеров, этот отрезок имеет смысл собрать со всех файлов и вывести как один файл. Полный код для CSS
Небольшие преобразования связанные с объединением разных частей CSS файлов

if ($handle=opendir('.')){
	while(false !== ($file=readdir($handle))){
		if ($file == '.' or $file == '..' or is_dir($file)) continue;
		if (substr($file,-4) != '.css') continue;
		if (substr($file,-7) == '.p2.css') continue;
		echo $file;
		$oldie='';
		$filename=substr($file,0,-4);
		$css=file_get_contents($file);
		$filepart=explode('/****IMAGES****/',$css);
		if (isset($filepart[1]))$oldie.='
'.$filepart[1];
		$css=implode('
',$filepart);
		if (file_exists($filename.'.p2.css'))$css.='
'.file_get_contents($filename.'.p2.css');
		$filepart=explode('/****IMAGES****/',$css);
		if ($oldie)file_put_contents($filename.'_ie.cssgz',gzencode(compress($oldie),9));
		$csscompress=compress($css);
		$cssimages=addimages($csscompress);
		file_put_contents($filename.'.cssgz',gzencode($cssimages,9));
	}
	closedir($handle);
}
function compress($buffer){
	$buffer=preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!','',$buffer);
	return str_replace(array("\r\n","\r","\n","\t",'  ','   ','    '),'',$buffer);
}
function addimages($buffer){
	return preg_replace('/url\(([\:-\w\/\.]*)/ie','"url(data:image/".((substr("\\1",-4)==".png")?"png":"gif").";base64,".base64_encode(file_get_contents("\\1"))',$buffer);
}

На этом все. Мы еще немножко сэкономили наши ресурсы и помогли себе проще обновлять скрипты по отдельности
Мы также можем включать в стандартные скрипты свои куски кода, дополняющие их. К примеру — в файл fancybox.js можно добавить скипт, который автоматически применяет эффект фанкибокса в нужному нам стилю

$(function(){
$('.fancybox').fancybox();
});

Если элементов  не будет — скрипт ничего не сделает. Здесь все индивидуально.