Исходные задачи

Где-то год назад я решил, что та система организации файлов CSS и JS, которую я использовал, становится все более и более неудобной. Тогда это было от двух до пяти файлов стилей, разделенные по типам содержимого (лейаут, дизайн). Для JS был один файл для всех функций сайта и отдельные файлы с плагинами.

Потом я понял, что когда работаешь над крупным проектом, достаточно сложно (мне по крайней мере) держать весь код или стили в 2-3 файлах. Когда количество строк переваливает за 2000-3000, найти что-то там или дописать в нужное место становится нереальным. Плюс увеличивается вес файлов, которые загружает клиент и сайт начинает работать медленнее.

Итак, задачи, которые я хотел решить:

1. организовать файлы так, чтобы грузить клиенту только нужные ему в данный момент;
2. файлы должны быть логично и удобно разложены на сервере; при этом сторонний разработчик должен быстро понять что и как здесь устроено;
3. отдавать клиенту сжатые файлы (без комментариев и лишних символов);
4. минимизировать количество отдаваемых клиенту файл, в идеале — по одному на стили и скрипты;
5. сделать так, чтобы клиент не загружал файлы каждый раз заново (кеширование);
6. при обновлении какого-то файла автомически должны обновляться и загружаться заново измененные файлы;
7. процесс сжатия и кеширования должен быть максимально автоматизирован.

Решение организации файлов

Я решил разделять файлы в зависимости от разделов проекта, плюс иметь один или несколько общих файлов для общих стилей и функций. Плагины я решил класть в отдельную папку внутри папки со скриптами или стилями.

Для скриптов я сделал еще одно разделение. Файлы с функциями у меня отдельно, а вызов этих функций — в другом файле. То есть если для раздела блогов функции хранятся в файле blogs.js, то их вызов делается в init.blogs.js. Так, зайдя в init.blogs.js сразу видно, какие именно функции запускаются при загрузке раздела.

В начале каждого файла (стилей или скриптов) я решил делать небольшое описание того, что тут лежит, где оно используется и что нужно для его работы (последнее относится только к скриптам).

Чтобы стало немного понятнее, приведу пример файловой структуры одного из проектов:

Подключение JS файлов в HTML делается в таком порядке: сначала в нужном порядке идут файлы, содержащие описания функций, а потом — файлы, делающие вызов функций:

<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/blogs.js"></script>
<script type="text/javascript" src="/js/init.js"></script>
<script type="text/javascript" src="/js/init.blogs.js"></script>

Решение сжатия и кеширования файлов

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

То есть если обычное подключение файлов скриптов выглядит вот так:

<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/blogs.js"></script>
<script type="text/javascript" src="/js/init.js"></script>
<script type="text/javascript" src="/js/init.blogs.js"></script>

То подключение через скрипт выглядит вот так:

<script type="text/javascript" src="/compress.php?js,js/common,js/blogs,js/init,js/init.blogs"></script>

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

Для решения первой задачи я решил использовать PHP библиотеки CSSmin и JSmin, соответственно. Для решения второго вопроса я сделал так, что скрипт сначала проверяет, есть ли сжатая версия этого набора файлов, и если есть, то отдает ее, а если нет, создает ее заново. В итоге я получил скрипт с такими возможностями:

• сжатие CSS и JS на с использованием CSSmin и JSmin, соответственно;
• объединение и сохранение сжатых версий файлов;
• автомическое обновление сжатой версии файлов, если какой-то из них был изменен;
• заголовки кеширования для браузеров.

Практическое применение

Сейчас, уже на третьем проекте, я делаю так. На тестовых макетах я подключаю все файлы отдельно, без использования скрипта сжатия. Так легче делать отладку, так как FireBug покажет, в каком файле и строчке произошла ошибка.

На живом сайте стили и скрипты подключаются через скрипт-сжималку, что существенно ускоряет загрузку сайта и экономит трафик.

Как использовать

Скрипты для работы нужны библиотеки CSSmin и JSmin. Так же нужно указать папку, где хранить сжатые версии файлов. У меня это /css/compressed/ и /js/compressed/, соответственно.

Файлы, которые необходимо сжать, нужно указывать следующим образом. Сначала указывается тип (css или js), потом через запятую путь до файл (только имя, без расширения) относительно файла-компрессора. В моем случае при условии, что compress.php и папки css и js находятся в одной директории, подключение выглядит как-то так:

<script type="text/javascript" src="/compress.php?js,js/common,js/blogs,js/init,js/init.blogs"></script>

Итак, ниже есть архив с файлом compress.php и необходимыми библиотеками:

Скачать (PHP)

Буду рад выслушать ваше мнение, вопросы и предложения в комментариях. Кстати, если кто-то сможет сделать такой же скрипт на других языках (.NET, Ruby, etc.), буду очень благодарен.