HTML + JavaScript + CSS компактный инструмент

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

  • HTML (только минимизировать)
  • JavaScript (минимизировать, оптимизировать и Munge)
  • CSS (минимизировать)

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

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

7 ответов

Решение

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

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

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

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

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

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

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

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

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

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

edit: минификатор HTML от Kangax (как предложил Бэджер) только минимизирует HTML.

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

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

Другие вопросы по тегам