Какие-нибудь рекомендации для CSS-миниатора? [закрыто]


289

Какие-нибудь рекомендации для CSS-миниатора?

Я буду бродить вокруг Google и пробовать кое-что, но я подозревал, что умное, опытное и любопытно красивое сообщество StackOverflow, возможно, уже оценило плюсы и минусы тяжеловесов.



20
Разоренный. Я читал «Как заводить друзей и оказывать влияние на людей». Не достаточно близко, хотя .
Пол Д. Уэйт

17
Вы, ребята, все странные. Мы умные, опытные и любопытно красивые.
Чак Ле Батт

2
Смотрите также: stackoverflow.com/q/65491/85414
Махали

3
+1 только для понимания «меняющейся природы» вещей вокруг, а также понимания и объяснения причин для закрытия подобных вопросов - даже если это ваше! ;)
Эндрю Барбер

Ответы:


98

YUI Compressor является фантастическим. Работает на JavaScript и CSS. Проверьте это.


4
В дополнение к этому, вот Makefile, который загрузит YUI Compressor, упакует ваши файлы и свернет их. github.com/balupton/jquery-sparkle/blob/...
balupton


@ JuniorMayhé Я использовал его, и мои стили полностью испортились, хотя я проверил «Только минимизировать, без запутывания символов». вариант) ... к сожалению, каждый минификатор, который я пробую, всегда нарушает мой стиль. Это потому, что онлайн-минифайеры - это все дерьмо? Так не должно быть.
диалект

1
@DiAlex Я понимаю, что многие из них портят наш код, мы должны использовать их осторожно, всегда выбирая «консервативный» подход, а не агрессивный ре-факторинг. Консерватор будет удалять только ненужные пробелы, конечные точки с запятой, повторяющиеся стили и так далее. Я думаю, что эти минифайеры могут легко повредить стиль, если мы используем некоторые CSS-хаки внутри CSS-кода. Обратная косая черта и странные символы могут свести компрессор с ума.
Младший Mayhé

Вы можете попробовать онлайн сервис zbugs.com - он использует компрессор yui для минимизации ваших файлов.
Тамик Созиев

45

Также есть порт .NET YUI Compressor, который позволяет: -

  • интегрировать минификацию / объединение файлов в события после сборки Visual Studio
  • интегрировать в TFS Build (включая CI)
  • если вы хотите просто использовать DLL в своем собственном коде (например, на минимизации на лету).

ОБНОВЛЕНИЕ 2011: И теперь это доступно через NuGet также :)


Я немного запутался. YUI Compressor устарела в пользу UglifyJS ( демо ). Имеет ли смысл работать с портом .NET?
Мартин Всетичка,

Приятель. Я начал этот порт в 2008 году или около того. Это 6 с лишним лет назад. Я также опубликовал этот ответ в '09. Поэтому, пожалуйста, проверьте даты и определите контекст, прежде чем задавать глупые вопросы. Теперь выйдите на улицу и
поиграйте

Pure.Krome: прошу отличаться. Я посмотрел репозиторий GitHub, и ему уже несколько месяцев, и коммиты этого года. Вот почему я спросил. "Приятель".
Мартин Всетичка,

: slow clap: хорошо заметили! ты на самом деле прав - о. Подождите. Я запустил проект на codeplex: yuicompressor.codeplex.com . Первый коммит 7 июля 2008 г. ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Затем переехал в GH в этом году . Я не делал никакой работы по его переносу в течение длительного времени. Здесь и там было только несколько странных исправлений ошибок. Так. Чувак. Я портирую ED это. Не портирую это. Это в режиме обслуживания. QED
Pure.Krome

1
Вы тоже :) И приветствует ссылку на UglifyJS - это было то, что я хотел проверить, чтобы узнать, сможем ли мы использовать его на работе - и вы только что напомнили нам об этом! ура :)
Pure.Krome

19

Мне нравится Minify . На PHP и работает с CSS или JavaScript.


2
+1 для минификации. Если вы уже знакомы с PHP, вам может быть удобнее установить его. Требуется PHP5. После того, как вы его настроите, вы можете забыть об этом, работать как обычно с любым количеством супер CSS-файлов и js-файлов с супер-пробелами и комментариями, как вы захотите, и minify сожмет их на лету.
Махали

13

CSSO в настоящее время лучший минификатор / оптимизатор.


2
Не знаю о «лучших», но стоит посмотреть.
Пол Д. Уэйт

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

1
хорошо, я сравнил CSSO с YUI Compressor в 30 КБ тестовом файле, и после сжатия сжатого вывода обоих инструментов CSSO выигрывает, сжимая файл на дополнительные 7 байтов. Конечно, это всего лишь один тестовый файл.
Пол Д. Уэйт

уменьшить CSS онлайн с помощью CSSO: css.github.io/csso/csso.html
tomByrer

По крайней мере, это один из двух рекомендованных Google PageSpeed ​​Insights .
Алекс Ванг

8

Если вы используете Python, я бы порекомендовал стройнее который, вероятно, не так быстр, как YUI Compressor, но в отличие от csscompressor.net он не подавляет CSS-хаки.

Я пристрастен с тех пор, как написал «стройнее», и сейчас я оцениваю YUI Compressor, чтобы увидеть, как он справляется со взломами. Пример стройнее в действии можно увидеть, если посмотреть источник crosstips.org



6

Если вы ищете онлайн-инструмент, попробуйте это: https://csscompressor.net/


1
Я хотел бы проголосовать против этого ответа (уже слишком поздно после того, как я проголосовал за него). Я пытаюсь сжать мой CSS, и это ломает вещи. Это совсем не хорошо. Предупреждение всем там, я думаю, что, если у вас нет первоклассных css стандартов, это может сломать ваше дерьмо!
BT

19
Но разве у вас не должно быть чистого, соответствующего стандартам CSS?
Чак Ле Батт

2
если вы используете шаблон HTML5, нет.
SkaveRat

Хороший инструмент. Я тестировал его, html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}и он работал лучше, чем YUI Compressor (который не устранял дубликаты для заполнения # test). Тем не менее, оба не смогли удовлетворить меня html,body{width:100%;height:100%}body{padding:0}(что, в моем понимании, эквивалентно, так как оба селектора имеют одинаковую специфичность).
drdaeman

CSS - это единственное, где иногда допускаются дрянные хаки. Некоторые из этих хаков используют странные трюки с комментариями, которые могут сломать минимизацию.
Брэндон

4

Я написал ультра быстрый CSS Minifier в C #. Алгоритм не обрабатывает Javascript, хотя. Вот это: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


Приятный вариант. Один запрос: вы сказали: «Согласно спецификации CSS, поддерживаются два типа строк: одинарные и двойные. Мой алгоритм оставляет строку нетронутой, даже если в ней есть пробельные символы ... Я просто думаю, что сохранение строки без изменений более интуитивно и профессионально ». Конечно, любые пробелы, которые не добавляют значения, должны быть удалены, чтобы сделать выходной файл как можно меньше? Разве это не точка минификации?
Пол Д. Уэйт

3
Ну, на мой взгляд, это верно в общем случае. Но я считаю строки особенным случаем. Разработчик оригинального CSS должен решать, удалять ли из строки бессмысленные пробелы. Алгоритм, который я показываю, просто следует спецификации, сохраняя строку без изменений.
Керидо

4

Попробуйте закрывающие таблицы стилей .

Помимо минификации, он также поддерживает линтинг , переключение RTL и переименование классов .

Он также может добавлять переменные , функции , условные выражения и миксины в CSS.

Также обратите внимание, что некоторые из этих функций зависят от остальных инструментов закрытия (которые сами по себе очень мощные).


как вы используете его на окнах? прости мое невежество
user2513846

3

Если вы ищете что-то в PHP, вот ссылка: -

Обезжиренный Minify

Хотя он является частью PHP Fat-Free Framework, он также может использоваться автономно.


Fat Free Framework - GPL, и поэтому я предполагаю, что эта часть их кода тоже. Просто на голову.
CodeReaper

У него есть ошибки: плохая идея.
Brunoais

3

Я считаю, что CSS SuperScrub от isnoop работает очень хорошо. Он может обрабатывать только прямые ссылки на CSS онлайн, хотя: / Вы можете обойти это, хотя, используя предпочитаемый сервис pastebin для хранения кода CSS и просто предоставив SuperScrub необработанную ссылку.


Я попробовал это, #test { padding: 1em; width: 10em; } #test { padding: 2em; }и это не удалось.
drdaeman

@drdaeman Это, вероятно, потому что он не знает, что делать с конфликтующими / дублирующимися значениями для данного селектора. Поскольку я не поддерживаю SuperScrub, я не могу сказать вам, когда или если это будет исправлено.
Джон Мишель

3

Если ваш сайт находится в ASP.NET, вы можете позволить своему сайту минимизировать CSS на лету (так что вам не придется делать это вручную каждый раз, когда вы вносите изменения). Например с этим:

http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx



3

Другие упоминали YUI Compressor, затем его .NET-порт, и я добавлю еще одну ссылку в цепочку. StyleManager - это серверный элемент управления, который объединяет порт .NET YUI Compressor, так что вы можете использовать его так же, как вы привыкли использовать ScriptManager. Он также добавляет кучу других приятных функций, таких как константы CSS, разрешение тильды (~) в ваших определениях фоновых изображений и т. Д. И т. Д. Он плотный, хорошо документированный, и я использовал его во всех своих последних проектах с о проблема. Проверьте это - gStyleManager.com


3

Все еще "в бета-версии", но должно работать довольно хорошо. Я использую код, стоящий за ним в каждом проекте: http://claudiu.phpfogapp.com/ Он построен на PHP, а также хранит ваш файл * .css в течение достаточно большого промежутка времени, несомненно, достаточно, чтобы позволить вам протестировать свой код с помощью минимизированный css. (Я удалил бы только старые css-файлы, если на сервере слишком много места).


2

Существует проект codeplex, который подключается к веб-сайтам .net, который минимизирует и сжимает файлы CSS и JS. Существует также сравнение между Microsoft AJAX Minifier и YUI Compressor, которое показывает, что YUI выходит немного лучше. Существует дополнительная вариация, которая сочетает в себе Microsoft Minifier и сжатие, которые резко сократили файл.

В любом случае ссылка является http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )



2

Онлайновый инструмент (намного лучше, чем www.csscompressor.net, который подхватил мой css): http://www.cssdrive.com/compressor/compress.php отлично справляется со своей работой.


Есть ошибки. В определенных ситуациях это нарушает совершенно хороший код
JS

1

Пример C #:

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");

1

Zbugs.com будет хорошим онлайн-инструментом для вас, он уменьшит ваши CSS в один клик


Конечно, хотя я не думаю, что есть много минифайеров, для запуска которых требуется более одного клика.
Пол Д. Уэйт

Вы правы, Пол :), но этот делает намного больше, чем просто минимизирует, и все в один клик
Тамик Созиев

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.