Инструмент HTML + JavaScript + CSS

Мне нужен инструмент, который может минимизировать, оптимизировать и отображать многие файлы этих возможных типов.

  • HTML (только для уменьшения)
  • JavaScript (minify, optimize и munge)
  • CSS (minify)

Конечным результатом должен быть один HTML файл только со всеми встроенными JavaScript и CSS или в худшем сценарии 3 файла соответственно для HTML, JS и CSS.

Мне известны такие инструменты, как YUI Compressor и т.д. То, что я в настоящее время не нашел, это тип компрессора, который будет работать на всех этих типах файлов и объединить их только в один огромный файл.

ОТВЕТЫ

Ответ 1

Gad, рассмотрим недостатки для минимизации CSS. Если у вас нет системы, в которой вы редактируете нормальный /minify/then deploy, это может сделать последующее редактирование CSS довольно рискованным.

Я рассмотрел весь этот аргумент в большом обновленном проекте UI для международного банка. Один сайт, в частности, занимал 1 миллион + посетителей в день, а номера полосы были безумными, несмотря на все наши усилия по его минимальному (каждый бит добавляется на сайт, который сильно пострадал). После анализа бизнеса большой командой очень талантливых умов решил, что мы предпримем несколько шагов, но НЕ сокращаем css из-за дополнительного времени, которое потребовалось бы для того, чтобы инженеры отменили минимизацию перед исправлением, минимизацией и перераспределением для простых настроек CSS. Цифры показали, что даже с улучшением полосы пропускания 5 Гбит/сут было еще дешевле не платить инженеру пользовательского интерфейса за дополнительное время.

Мы не знаем особенности вашего сайта, но не так уж много, что беспокоиться о трафике, который использует мой пример. Запустите свой сайт в новом анализаторе скорости Firebug и посмотрите, какова реальная выгода от минимизации..... теперь умножайте это на свой трафик. Обычно это число не слишком страшно. Потратьте время на создание спрайтов изображений, объединив css и js в соответствующие файлы (лучше, чем вымывание в отдельные файлы php из-за преимуществ кеширования), чтобы ограничить HTTP-запросы и обеспечить правильную настройку кеширования. Запустите сжатие gzip. Если после этих шагов вы не очень хорошо, переведите сайт на новый уровень.

Держите его простым... он существенно влияет на части обновления и обслуживания жизненного цикла сайта. С сохранением времени и головной боли вы можете помочь нам с нашими вопросами:)

Ответ 2

Мое предложение состояло в том, чтобы поместить весь JavaScrpt внутри <script> в заголовок и поместить весь CSS в тег <style>. Тогда оптимизируйте в меру своих возможностей, а затем минимизируйте его самостоятельно. Никакое программное обеспечение никогда не сможет обрабатывать каждый случай. Если вы пытаетесь минимизировать размер файла, просто удалите новые строки и ненужные пробелы.

Я также нашел этот, который должен работать над вашим файлом со всеми 3 в нем.

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

Ответ 3

Если вы еще не используете gzip, начните использовать его уже, и мы можем закрыть эту штуку;)

Ответ 4

Насколько я знаю, такого инструмента нет. Однако, если вы используете PHP на стороне сервера, вы можете попробовать PHP Speedy (не активно развивается, а работает) или Minify для автоматического минимизации, кеширования и gzipping (HTML, CSS, JS).

edit: kangax HTML minifier (как предложил Badger) только HTML-оценка.

Ответ 5

вы можете использовать jsCompressor для сжатия и минимизации нескольких файлов JavaScript и CSS Compressor для сжатия/минимизации нескольких файлов Css в один файл. и для оптимизации ваших HTML файлов вы можете отправить запрос на отправку своего кода на сервер Google Clouser, который отправляет ответ с оптимизированным кодом HTML.

Ответ 6

http://prettydiff.com/?m=minify будет делать именно то, что вам нужно, за исключением того, что он только минимизирует JavaScript и не обфускает его.

Ответ 7

Я предлагаю вам посмотреть конструкцию script, которая включена в html5 Boilerplate: http://html5boilerplate.com/. С минимальной настройкой он сделает то, что вы хотите сделать.