Как автоматизировать объединение и минификацию Javascript в группах файлов для разных веб-страниц?

Скажем, моя структура страницы:

1. one.html :
   includes ->   a.js , b.js , c.js ,d.js

2. two.html :
   includes ->   a.js , b.js,  x.js, y.js, z.js

3. three.html :
   includes ->   a.js , b.js, s.js,  x.js, y.js

и так далее. Некоторые страницы посещаются чаще, чем другие, например, 3 страницы обеспечивают 99% всех просмотров страниц сайта.

Ищу решение:

i) Объединяйте и сворачивайте файлы в группы, которые можно включать на страницы.

ii) Имеет некоторую логику для сопоставления имен файлов группы с окончательным объединенным именем файла.

iii) Включает минификатор, такой как компилятор Google Closure / компрессор YUI.

Одно из рассмотренных мной решений: PHP minify

который делает большую часть этого. Однако для меня у него есть следующие недостатки:

i) Я бы размещал свои статические комбинированные файлы на сервере CDN, а не на том же веб-сервере, на котором размещается PHP minify, поэтому логика PHP minify для файлов сервера по имени группы не работает для меня.

ii) PHP Minify использует PHP CGI для обработки и обслуживания скриптов, тогда как я хотел бы, чтобы мой миниатюрный контент обслуживался непосредственно с сервера CDN.

Есть ли в PHP Minify некоторые функции для сопоставления имени группы с объединенным именем файла, которые я могу использовать на своей веб-странице, чтобы напрямую установить путь CDN для объединенного файла JS. например

<?php
  $groupName = array("onePage" => array('a.js','b.js','c.js','d.js');
?>

<script type="text/javascript" src="http://www.MYSTATICSERVER.com/js/<?php getMergedFileName($groupName)"></script>

Вместо того, чтобы вызывать PHP-скрипт PHP Minify для получения файлов группы, который на самом деле является вызовом PHP-страницы, которая затем обслуживает содержимое javascript из ранее сгенерированных файлов:

<script type="text/javascript" src="http://www.MYWEBSERVER.com/min/?g=onePage" ></script>

(Я согласен, что по большей части это можно сделать, комбинируя различные решения с настраиваемыми сценариями развертывания и инструментами минимизации, например ANT, FABRIC + YUICompressor / ClosureCompiler, но я ищу хорошо разработанное настраиваемое решение, которое я, возможно, пропустил)


javascript cdn minify yui-compressor google-closure-compiler
person DhruvPathak    schedule 27.04.2012    source источник
comment
Спасибо всем за вклад, но я не нашел ответа на эти вопросы, который может быть полезен для всех нас. Пожалуйста, продолжайте вносить свой вклад.   -  person DhruvPathak    schedule 07.05.2012

Ответы (4)


arrow_upward
3
arrow_downward

Обновлено, чтобы показать пример для минимизации

Это кажется выполнимым с помощью minify. Я не уверен, пробовали ли вы это, но предлагаю всем, кому это может понадобиться

1) Minify может сгенерировать объединенную и сжатую копию ваших скриптов и использовать ее в качестве кеша, так что ему не нужно обрабатывать все ваши файлы навсегда. Чтобы включить это, просто отредактируйте файл config.php, указав расположение временного каталога.

$min_cachePath = 'c:\\xampp\\htdocs\\min\\cache';

2) После того, как вы добавите все свои группы в groupsConfig.php, просто сделайте запрос каждой группе, чтобы minify сгенерировал выходные файлы в папке кеша.

3) Для каждой группы вы найдете 2 файла во временной папке с таким именем:

minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz

4) Вы можете переименовать файлы и при необходимости развернуть их прямо в CDN.

5) Если ваш CDN позволяет переписывать URL-адрес, вы можете переписать URL-адрес сценария для обслуживания JS без необходимости изменять расположение на страницах, которые вы обслуживаете.

Если у вас нет огромного количества различных конфигураций, я бы рекомендовал вам сделать это с помощью YUICompressor и развернуть в своей сети CDN. На самом деле довольно тривиально автоматизировать что-то подобное с помощью простого сценария оболочки. Однако если у вас действительно сложная настройка, вы можете рассмотреть возможность использования инструмента сборки, такого как grunt. который работает поверх node.js. Я использовал Grunt для создания файлов JS для разных проектов с использованием одной и той же кодовой базы, и он работает довольно хорошо. Кроме того, поддерживаются Lint и сжатие OOTB.

person Checksum    schedule 30.04.2012
comment
Спасибо за вклад. Но PHP Minify уже делает большую часть этого, я искал в нем некоторые улучшения, подходящие для моего типа развертывания. - person DhruvPathak; 07.05.2012

arrow_upward
1
arrow_downward

Мои собственные проекты очень похожи на ваши; HTML с внешним и внутренним JavaScript, CSS и изображениями. Я тоже искал готовое решение и не смог его найти, поэтому разработал собственное. Вот краткое изложение созданной мной системы. Если вы идете по этому маршруту, я надеюсь, это даст вам представление о том, что искать.

Система начинает с проверки конкретной версии проекта, который вы хотите развернуть. Вам необходимо установить перевод между путями в локальной файловой системе и соответствующими удаленными путями (например, CDN или веб-сервер); в моем случае все активы загружаются из фиксированного каталога внутри проекта.

Я начинаю с анализа всех шаблонов HTML (у меня есть MVC для отделения HTML от кода PHP); здесь собраны все ссылки на JavaScript, CSS и изображения:

  • Ссылки на изображения в HTML, JavaScript или CSS заменяются их местоположением в CDN.
  • Интернированные JavaScript и CSS сжимаются на лету с помощью Closure Compiler и YUI соответственно.
  • Последовательные внешние блоки JavaScript и CSS заменяются отдельными пакетами сжатого кода / стиля; имя пакета - это хэш имен файлов и их соответствующих версий (CDN будет обслуживать эти файлы с максимальной датой истечения срока действия, поэтому любое изменение должно вызывать уникальное имя файла).

Затем все пакеты сжимаются, заархивируются, сохраняются и загружаются в CDN вместе с любыми образами при подготовке к развертыванию. Файлы PNG также «измельчаются», чтобы уменьшить их размер.

Наконец, весь проект загружается и развертывается (в случае нескольких серверов).

Заключение, это большая работа, но когда она запускается, приятно видеть, как она работает :)

person Ja͢ck    schedule 04.05.2012
comment
Спасибо за вклад. Но вы в первую очередь резюмировали мой вопрос :(, я с нетерпением искал хорошо поддерживаемое существующее решение, такое как PHP minify. На самом деле не хочу писать его сам. - person DhruvPathak; 07.05.2012
comment
Думаю, вы правы :) хотел бы поделиться с вами своим кодом, но из-за его внутренней природы вам все равно придется потратить много времени на настройку различных скриптов ... возможно, мне стоит переписать его в открытый исходный раствор = D - person Ja͢ck; 07.05.2012
comment
Ты будешь героем, тебя ждет слава на гитхабе. - person DhruvPathak; 07.05.2012

arrow_upward
0
arrow_downward

Создайте файл конфигурации группировки (xml / php), который содержит правила группировки для использования в имеющемся статическом HTML.

<groupings>
    <group path='grouped_minified_js.js'><!-- multiple groups can be used for grouping js/css files. reuse this group by including the id in multiple views -->
            <resource>PATCH_OF_FILE_TO_BE_GROUPED</resource><!-- multiple file to be grouped -->
            .
            .
            .
        </group> 
        <group path='xyz.css' /> ...<!-- additional grouping rule -->
</groupings>

создать php-скрипт, который читает эту конфигурацию и использует PHP minify для создания сгруппированных миниатюрных файлов js / css по пути, указанному в определении группы.

Используйте эти пути для включения сгруппированных файлов в статические файлы HTML. Запустите сценарий, чтобы протестировать свои страницы и развернуть сгруппированные файлы в CDN.

person Satish N Ramteare    schedule 03.05.2012

arrow_upward
0
arrow_downward

хрюкать здорово. Если это не сработает, попробуйте кассету: http://getcassette.com/

person robrich    schedule 03.05.2012