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

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

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


person Paul D. Waite    schedule 24.04.2009    source источник
comment
См. stackoverflow.com/questions/702907/   -  person Julien    schedule 25.04.2009
comment
Разоренный. Я читал «Как заводить друзей и влиять на людей». Но недостаточно внимательно.   -  person Paul D. Waite    schedule 25.04.2009
comment
Вы все такие странные. Мы умны, опытны и необычайно красивы.   -  person Chuck Le Butt    schedule 15.06.2010
comment
Я предпочитаю, чтобы меня называли злом.   -  person Mateen Ulhaq    schedule 24.03.2011
comment
См. Также: stackoverflow.com/q/65491/85414   -  person mahalie    schedule 25.03.2011
comment
Ознакомьтесь с решением из 7 шагов, описанным здесь stackoverflow.com/a/11624173/863980   -  person vulcan raven    schedule 27.07.2012
comment
Не конструктивно, но 200 голосов и 47000 просмотров! БУЙА!   -  person Paul D. Waite    schedule 19.07.2013
comment
(Тем не менее, только что послушав эпизод с большими заключительными вопросами о Stack Exchange подкаст, этот вопрос не подходит для Stack Exchange.)   -  person Paul D. Waite    schedule 26.07.2013
comment
Я не понимаю, что чрезмерное использование closed как неконструктивное для SO. Это вполне разумный вопрос, он был бы объективным и подходящим для обсуждения здесь с небольшими поправками.   -  person Mark E. Haase    schedule 15.08.2013
comment
@mehaase: Я не согласен с вами, что это разумный вопрос. Во-первых, сайты Stack Exchange не предназначены для обсуждения - они предназначены для вопросов и ответов. Общие рекомендации / вопросы со списком, подобные этому, проблематичны, потому что на них невозможно ответить - чтобы продолжать быть точными и не вводить в заблуждение после того, как их спросят, их нужно будет постоянно поддерживать, что модель Stack Exchange не поддерживает особенно Что ж.   -  person Paul D. Waite    schedule 16.08.2013
comment
@ PaulD.Waite Не предназначены для обсуждения. Я не думаю, что это обсуждение. Они созданы для вопросов и ответов. Хорошо, это вопрос, и на него есть ответы. Как это не вопросы и ответы? ... чтобы и впредь быть точным Каждый вопрос на этом сайте со временем станет неточным; технологии быстро меняются. Мы, кажется, неплохо справляемся с переменами. Если бы вопрос был отредактирован так, чтобы он читался как «Какой CSS-минификатор работает на $ PLATFORM и соответствует $ TECHNICAL_OBJECTIVES», тогда он стал бы более фактическим вопросом, вызывающим более объективные ответы. Итак, давайте исправим!   -  person Mark E. Haase    schedule 16.08.2013
comment
@mehaase: ах, да - вы сказали: «Это вполне разумный вопрос, он будет объективным и подходящим для обсуждения здесь» (выделено мной). Я спрашивал об этом. «Если бы вопрос был отредактирован следующим образом:« Какой CSS-минификатор работает на $ PLATFORM и соответствует $ TECHNICAL_OBJECTIVES, тогда это станет более фактическим вопросом ... Итак, давайте исправим это! » - Пожалуйста, сделай. Когда я писал это, я не имел в виду никаких технических целей. Я просто хотел знать, что используют все остальные, поэтому вопрос был плохим. У меня пока нет никаких технических задач, поэтому я не могу их добавить.   -  person Paul D. Waite    schedule 16.08.2013
comment
+1 просто для того, чтобы понять «меняющуюся природу» происходящего здесь, а также понять и объяснить причину подобных закрывающих вопросов - даже если это ваше! ;)   -  person Andrew Barber    schedule 30.08.2013
comment
Я бы посмотрел на текущее сравнение минификаторов CSS.   -  person wedi    schedule 29.05.2017


Ответы (21)


YUI Compressor великолепен. Работает на JavaScript и CSS. Проверить это.

person Buddy    schedule 24.04.2009
comment
В дополнение к этому, вот Makefile, который загрузит YUI Compressor, упакует ваши файлы и уменьшит их. github.com/balupton/jquery-sparkle - person balupton; 26.07.2010
comment
refresh-sf.com/yui/#output - person Junior Mayhé; 16.12.2011
comment
@ JuniorMayhé Я использовал его, и мои стили полностью испортились, хотя я проверил только Minify, без обфускации символов. option) ... к сожалению, каждый минификатор, который я пробую, всегда ломает мои стили. Это потому, что все онлайн-минификаторы - дерьмо? Так не должно быть. - person dialex; 12.08.2012
comment
@DiAlex Я понимаю, что многие из них портят наш код, мы должны использовать их осторожно, всегда выбирая консервативный подход, а не агрессивный рефакторинг. Консервативным подходом будет удаление только ненужных пробелов, конечных точек с запятой, повторяющихся стилей и т. Д. Я думаю, что эти минификаторы могут легко повредить стиль, если мы будем использовать некоторые хаки css внутри кода css. Обратные косые черты и странные символы могут свести с ума компрессор. - person Junior Mayhé; 12.08.2012
comment
Вы можете попробовать онлайн-сервис zbugs.com - он использует компрессор yui для минимизации файлов. - person Tamik Soziev; 19.10.2012
comment
@Buddy, похоже, страница, которой вы поделились, больше не доступна. Или проект закрыт Yahoo. - person Prakash Dayaramani; 03.04.2018

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

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

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

person Pure.Krome    schedule 07.07.2009
comment
Я немного запутался. Компрессор YUI устарел в пользу UglifyJS (демо). Есть ли смысл работать с портом .NET? - person Martin Vseticka; 29.11.2014
comment
Приятель. Я запустил этот порт в 2008 году или около того. Это шесть с лишним лет назад. Я также опубликовал этот ответ в 2009 году. Поэтому, пожалуйста, проверьте даты и получите некоторый контекст, прежде чем задавать глупые вопросы. А теперь выйди на улицу и поиграй немного :) - person Pure.Krome; 29.11.2014
comment
Pure.Krome: Я позволю себе не согласиться. Я посмотрел репозиторий GitHub, ему несколько месяцев, а коммиты относятся к этому году. Вот почему я спросил. Приятель. - person Martin Vseticka; 29.11.2014
comment
Хорошо, спасибо за разъяснения. Хороших выходных. - person Martin Vseticka; 30.11.2014
comment
Вы тоже :) И приветствую ссылку на UglifyJS - это было то, что я хотел проверить, чтобы увидеть, можем ли мы использовать его на работе - и вы только что напомнили нам об этом! ваше здоровье :) - person Pure.Krome; 30.11.2014

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

person artlung    schedule 07.07.2009
comment
+1 для Minify. Если вы уже знакомы с PHP, возможно, вам будет удобнее его установить. Требуется PHP5. После настройки вы можете забыть об этом, работать в обычном режиме с любым количеством файлов css или js с супер-пробелами и комментариями, а minify сжимает их на лету. - person mahalie; 25.03.2011

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

person silent    schedule 04.10.2011
comment
Незнаю о «лучших», но стоит взглянуть. - person Paul D. Waite; 04.10.2011
comment
Просто попробуйте, и вы убедитесь, что это лучший вариант. Насколько мне известно, аналогов его технике минификации на данный момент нет. - person silent; 18.10.2011
comment
Хорошо, я сравнил CSSO с YUI Compressor на тестовом файле размером 30 КБ, и после сжатия сжатого вывода обоих инструментов CSSO побеждает, сжав файл на дополнительные 7 байтов. Конечно, это всего лишь один тестовый файл. - person Paul D. Waite; 18.10.2011
comment
уменьшить CSS в Интернете с помощью CSSO: css.github.io/csso/csso.html - person tomByrer; 17.12.2013
comment
По крайней мере, это один из двух, рекомендованных Google PageSpeed ​​Insights. - person Alex Vang; 08.11.2017

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

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

person Peter Bengtsson    schedule 17.11.2009

Ознакомьтесь с CSSTidy: http://csstidy.sourceforge.net/usage.php

И в Интернете по адресу: http://cdburnerxp.se/cssparse/css_optimiser.php

person Murali Bala    schedule 04.04.2011
comment
Это лучшее. Спасибо - person FDisk; 01.12.2011
comment
Модифицированная онлайн-версия, поддерживающая CSS3, доступна по адресу devilo.us - person rafleo; 08.02.2013

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

person miguelSantirso    schedule 27.10.2009
comment
Хотел бы я проголосовать за этот ответ (уже слишком поздно после того, как я проголосовал за него). Я пытаюсь сжать свой css, и он ломает вещи. Это совсем не хорошо. Предупреждение всем, я предполагаю, что если у вас нет CSS, совместимого с нетронутыми стандартами, это может сломать вам дерьмо! - person B T; 23.09.2010
comment
Но, не следует у вас использовать чистый, соответствующий стандартам CSS? - person Chuck Le Butt; 23.09.2010
comment
если вы используете шаблон HTML5, нет. - person SkaveRat; 17.04.2011
comment
Хороший инструмент. Я тестировал его на html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}, и он работал лучше, чем YUI Compressor (который не устранял дубликаты для заполнения # теста). Тем не менее, оба не смогли удовлетворить меня с помощью html,body{width:100%;height:100%}body{padding:0} (что, в моем понимании, эквивалентно, поскольку оба селектора имеют одинаковую специфичность). - person drdaeman; 13.06.2011
comment
CSS - это единственное, где иногда допустимы дрянные взломы. Некоторые из этих хаков используют странные уловки с комментариями, которые может сломать минификация. - person Brandon; 06.09.2011
comment
Я лично использую CompressCSS. Он использует clean-css и очень безопасен в использовании. - person Vianne; 01.09.2017

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

person Kerido    schedule 08.02.2010
comment
Симпатичный вариант. Один вопрос: вы сказали: «Согласно спецификации CSS, поддерживаются два типа строк: одинарные и двойные кавычки. Мой алгоритм оставляет строку нетронутой, даже если внутри нее находятся пробелы ... Я просто думаю, что сохранение строки без изменений более интуитивно и профессионально ». Разумеется, следует удалить любые пробелы, не добавляющие смысла, чтобы выходной файл был как можно меньше? Разве не в этом смысл минификации? - person Paul D. Waite; 08.02.2010
comment
Что ж, на мой взгляд, в общем случае это точно правильно. Но я считаю струны особым случаем. От разработчика исходного CSS зависит, удалять ли бессмысленные пробелы из строк. Алгоритм, который я показываю, просто следует спецификации, сохраняя строку неизменной. - person Kerido; 09.02.2010

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

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

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

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

person Andrzej Duś    schedule 28.03.2012
comment
как вы его используете в окнах? прости мое невежество - person user2513846; 29.01.2017


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

person John Michel    schedule 26.07.2010
comment
Я пробовал это на #test { padding: 1em; width: 10em; } #test { padding: 2em; }, и это не удалось. - person drdaeman; 13.06.2011
comment
@drdaeman Вероятно, потому что он не знает, что делать с конфликтующими / повторяющимися значениями для данного селектора. Поскольку я не поддерживаю SuperScrub, я не могу сказать вам, когда и будет ли это исправлено. - person John Michel; 15.06.2011

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

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

person Katz    schedule 11.11.2010

Perl имеет CSS :: Minifier (и версию XS для дополнительной скорости).

person Ether    schedule 14.03.2011

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

person andrew    schedule 13.04.2011

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

person Claudiu    schedule 24.11.2010

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

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

person Jonathan Stanton    schedule 17.06.2011

Вот как я сделал это для MVC3: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html Прелесть этого подхода в том, что он делает все на лету, и вам не нужно предварительно обработать файлы вручную или настроить пост-сборку.

person m_kramar    schedule 31.07.2011

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

person B T    schedule 23.09.2010
comment
Есть ошибки. В определенных ситуациях он ломает отличный js-код. - person brunoais; 08.03.2012

Пример 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*", ";");
person Marcelo Gondim    schedule 14.11.2010

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

person Tamik Soziev    schedule 30.04.2011
comment
Конечно, хотя я не думаю, что существует много минификаторов, для запуска которых требуется более одного щелчка мышки. - person Paul D. Waite; 30.04.2011
comment
Вы правы, Пол :), но этот делает гораздо больше, чем просто минимизирует, и все в один клик - person Tamik Soziev; 01.05.2011

Взгляните на последнюю версию HTML5BoilerPlate от Пола Айриша - он содержит скрипт сборки для минимизации всех ваших ресурсов. (включая PNG и JPG). Вы можете посмотреть демонстрационное видео здесь.

person Ben Hughes    schedule 24.05.2011
comment
Конечно; его минификатор CSS - это YUI Compressor. - person Paul D. Waite; 24.05.2011