Упаковка, кеширование, JS и CSS в PHP, которые различают среду разработки и производства

Я стараюсь сделать разработку легкой и иметь оптимизированную производительность в производстве.

Цели, которые я пытаюсь сделать, это:

Делайте производственные страницы быстро! Я бы хотел, чтобы Google Page Speed и YSlow вернули лучшие результаты. Это означает:
1. Комбинируйте и сжимайте JS-файлы и CSS и поместите группу в нужное место (внизу или вверху страницы) в HTML. Для .js Google Closure кажется лучшим выбором.
2. .JS и .CSS надежно кэшируются, но имейте в виду , что они перезагружаются, когда обновляется компонент .JS или CSS. 301 Файл не изменен и т. Д.
3. Тип кэша : я думаю, что кэш на диске в порядке. Рассмотрим APC и Memcache или Redis, если они значительно улучшат скорость.
4. Способна указывать и использовать ленивую нагрузку .JS, если это необходимо, или, по крайней мере, не блокировать отображение страницы.
5. (Необязательно) Сжатие HTML тоже.
Сделать разработку сайта проще :
1. Используйте короткую команду в файле .php, если вы хотите включить .js или .css и сжать их только в производственной среде
  - Используйте синтаксис, например pack_js (['first.js', 'second.js' 'third.js']) и pack_css (['first.less', 'second.less' 'third.css'], true)
  - Легко настроить среду разработки или производства. Может быть, просто вызов SetDebug (true или false) . Производство по умолчанию
  - Простота настройки папок кэша и исходных папок
2. Использование МЕНЬШЕГО для создания CSS-дизайна отстойно. Автоматически компилировать LESS-файлы в CSS в процессе производства, но использовать LESS.js в разработке, чтобы каждый раз, когда вы меняете файл .less в процессе разработки, он обновляется на сервере.
3. (необязательно) В разработке он включает консоль JS и LESS, похожую на оболочку, на https://www.squarefree.com/bookmarklets/webdevel.html

Примечание. Вполне нормально использовать модули Apachee и файлы .htaccess, если они значительно ускоряют процесс. Но он должен быть способен быстро настроить их, в идеале, только с помощью команды настройки.

Есть ли что-то такое? Или каковы наилучшие ресурсы для начала?

Я бы предпочел решение, состоящее из PHP-скрипта (в конце концов, немного файлов .php, .htaccess и сжатия исполняемых файлов), который сжимает .JS с помощью Google Closure Compiler и сжимает / компилирует файлы CSS / LESS, удаляя бесполезные комментарии и пробелы , На производственном сервере можно использовать специальный файл cookie для вывода версии разработки.

Я бы хотел:

Функцию php можно использовать следующим образом: pack_js (['first.js', 'second.js', 'third.js']), которые пишут что-то вроде:

На серверах разработки:

<script type="text/javascript" src="static/js/first.js"></script> <script type="text/javascript" src="static/js/second.js"></script> <script type="text/javascript" src="static/js/third.js"></script>

На производственных серверах (если специальных файлов cookie нет):

 <script type="text/javascript" src="cache/12a42323bfe339ea9w.js"></script>

Другая функция: pack_css (['first.less ",' second.less ',' third.css '], true), которые пишут что-то вроде:

На серверах разработки:

 <link rel="stylesheet/less" href="/static/css/first.less" type="text/css" /> <link rel="stylesheet/less" href="/static/css/second.less" type="text/css" /> <link href="/static/css/third.css" type="text/css" /> <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script> <script type="text/javascript" charset="utf-8"> less.env = "development"; less.watch(); </script>

На производственных серверах (если специальных файлов cookie нет):

 <link href="/cache/46537a8b8e876f7a8e7.css" type="text/css" />

второй параметр указывает, должен ли less.js выводиться на сервере разработки

Очевидно, что 12a42323bfe339ea9w.js и 46537a8b8e876f7a8e7.css – это оптимизированная, упакованная и скомпилированная версия скрипта. Это решение должно иметь возможность обнаруживать, когда исходный файл изменяется и перекомпилирует сценарии для производства. Он должен быть настроен для определения местоположения сценария и типа кэширования (диск в порядке). В идеале у pack_js, вероятно, есть возможность сделать возможную ленивую загрузку js в процессе производства.

Каждое предложение приветствуется.

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

CSS-JS-Booster и Turbine до сих пор выглядят как лучшая отправная точка: http://github.com/Schepp/CSS-JS-Booster и http://turbinecss.org/

Другие решения JS / CSS Combiners и статьи

http://code.google.com/p/minify – это хорошо, но немного сложно настроить.
http://rakaz.nl/code/combine. Вы можете использовать sintax следующим образом: http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js ( не совсем лучшее). Мне также кажется, что я видел патч к этому скрипту, но я не могу его найти сейчас. (пример использования http://brainfart.com.ua/post/code-cache-combine/ )
http://www.ejeliot.com/blog/72 и http://www.ejeliot.com/samples/combine/combine.phps Решение Ed Eliot comb.php. Это позволяет указывать только после того, как файл слияния
http://aciddrop.com/php-speedy/ другое решение.
http://www.artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/ Использование mod_concat и обзор других решений
http://wordpress.org/extend/plugins/w3-total-cache/ Это плагин WordPress. Это очень интересно, но, вероятно, большая работа, чтобы сделать его независимым от WordPress.
http://bakery.cakephp.org/articles/view/combine-your-js-css-files-for-faster-loading Решение CakePHP

Ресурс для сжатия и кеширования JS:

http://code.google.com/p/php-closure/ PHP-скрипт, который позволяет комбинировать файлы .js. ancd combile считает API-интерфейс Google Closure REST. Проверять метки времени и кэшировать комбинированную версию локально.
http://dean.edwards.name/download JS упаковщик-компрессор / обфускатор. Я не знаю, как долго проходит декомпрессия. Но он смог сжать jQuery 1.4.2, скомпилированный / уменьшенный с Closure до 50639 байт от 71946 (почти 30% сокращение!) С Base62 Encode on! Было бы интересно сравнить версии gzipped. Что касается JS obfuscation Оптимизатор Packer немного затрудняет вмешательство в ваш JS-код.
http://thinkvitamin.com/dev/serving-javascript-fast/ Отличная дискуссия о gzip и кешировании
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool Инструмент для упаковки JS / CSS Ruby Juicer

LESS компиляторы / учебники / инструменты:

http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3 Less.js учебник / введение.
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js Презентация less.js (полезные комментарии)
http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/ и http://github.com/cloudhead/less.js Это компилятор LESS, написанный в JS, а также может быть добавлен в браузера. Отлично подходит для развития
http://lesscss.org/ Что такое LESS. Первоначально написанный в Ruby, но есть реализация во многих разных языках,
http://leafo.net/lessphp/ Меньше компилятор написан на PHP (он не обновляется)
960 – это еще один способ облегчить ситуацию; http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/
http://github.com/everzet/sfLESSPlugin МЕНЬШЕ в симфонии
http://drupal.org/project/less Drupal CSS Preprocessor
http://github.com/sunny/csscaffold PHP-парсер чего-то подобного LESS, но не совсем
http://code.google.com/p/maven-less-plugin/ maven-less-plugin использует носорог, envjs и less.js для перевода меньшего кода на css в фазе процесса-источника вашей сборки maven. В итоге вы получаете артефакт с готовым к использованию кодом css.

В параметрах времени развертывания:

http://phing.info/docs/guide/stable/ Phing – это система создания / развертывания в PHP
http://www.capify.org/index.php/Capistrano Решение Ruby

Почему вы не используете систему сборки проекта для развертывания приложения на производственном сервере, который делает именно это? Для PHP вам может понравиться Phing , поскольку он позволит вам писать дополнительные плагины в PHP, которые вы можете выполнить при развертывании. Другие варианты, которые вы, возможно, захотите рассмотреть по этому пути, – это Ant и Capistrano (и есть много других), но для этого требуется знание других языков (предоставлено, вы можете запустить парсер php из них, если вы действительно хотели … ).

Отличный вопрос!

Я работал с процессом с аналогичными требованиями, но мы использовали несколько иной подход. Я понимаю, что, может быть, это не совсем то, что вам нужно, но все равно сделайте несколько рекомендаций:

Сделайте часть сжатия / компиляции процесса доставки. (Возможно, вы уже это делаете, но из этого не было ясно).
Сжимайте и компилируйте его на серверах разработки. Это может быть проблемой для отладки / тестирования, но вы хотите, чтобы версия для производства и тестовые версии были как можно более похожи. Если у вас есть роскошь нескольких этапов разработки, вы можете сжать один из них.
Выполняйте сжатие / компиляцию только в том случае, если она проходит какое-то качественное сканирование (например, jslint )
Не объединяйте модули – держите их отдельно. Выгоды, которые вы получите, будут настолько незначительными, что почти бессмысленны.
Не изменяйте HTML, просто измените содержание зависимых модулей.

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