Будь-які рекомендації щодо мініфікатора CSS? [зачинено]


289

Будь-які рекомендації щодо мініфікатора CSS?

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



20
Розбита. Я читав "Як дружити і впливати на людей". Хоча недостатньо близько .
Пол Д. Уейт

17
Ви, хлопці, все дивно. Ми - розумні, досвідчені та з цікавістю красені.
Чак Ле Бут

2
Дивіться також: stackoverflow.com/q/65491/85414
mahalie

3
+1 лише для розуміння "мінливої ​​природи" речей, що знаходяться тут, і розуміння та пояснення причин для закриття подібних питань - навіть якщо це ваше! ;)
Ендрю Барбер

Відповіді:


98

YUI Compressor є фантастичним. Він працює на JavaScript та CSS. Перевір.


4
Додавши до цього, ось Makefile, який завантажить компресор YUI, запакує ваші файли та мінімізує їх. github.com/balupton/jquery-sparkle/blob/…
balupton


@ JuniorMayhé Я використовував це, і мої стилі повністю заплуталися, хоча я поставив прапорець "Тільки мінімізувати, жодних обфузацій символів". варіант) ... на жаль кожен мініфікатор, який я намагаюся, завжди ламає свої стилі. Це тому, що онлайн-мініфери всі лайно? Це не повинно бути таким.
dialex

1
@DiAlex Я розумію, що багато хто з них помиляється з нашим кодом, ми повинні їх обережно використовувати, завжди вибираючи "консервативний" підхід, а не агресивний пере-факторинг. Консервативним буде лише видалення зайвих пробілів, виведення крапки з комою, дублювання стилів тощо. Я думаю, що стиль може бути легко пошкоджений цими minifiers, якщо ми будемо використовувати деякі css-хаки всередині коду css. Підвісні коси та символи wierd можуть звести з розуму компресор.
Молодший Мейхе

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

45

Також є .NET-порт YUI Compressor, який дозволяє: -

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

ОНОВЛЕННЯ 2011: А тепер це також доступно і через NuGet :)


Я трохи розгублений. Компресор YUI застарілий на користь UglifyJS ( демо ). Чи має сенс працювати на порт .NET?
Мартін Всетічка

Мате. Я почав цей порт у 2008 році. Це 6 дивних років тому. Я також опублікував цю відповідь у '09. Тому, будь ласка, перевірте дати та знайдіть якийсь контекст, перш ніж запитати дурних питань. А тепер вийдіть на вулицю та пограйте на трошки :)
Pure.Krome

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

: повільний хлопання: добре помічений! ти насправді правда --- о. Зачекайте. Я розпочав програму на codeplex : yuicompressor.codeplex.com . Перший вступ 7 липня 2008 року ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Потім перенесли його в GH цього року . Я не робив жодної роботи над перенесенням її протягом a.long.time. Тут і там було лише кілька незвичайних виправлень помилок. Так. Чувак. Я порту ED це. Чи не порт ІНГ його. Це в режимі обслуговування. QED
Pure.Krome

1
Ви теж :) І привітатись за посилання на UglifyJS - це було щось, що я мав намір перевірити, чи не можемо ми використовувати його на роботі - і ви просто нагадали нам про це! ура :)
Pure.Krome

19

Мені подобається Minify . У PHP і працює з CSS або JavaScript.


2
+1 для Minify. Якщо ви вже знайомі з PHP, можливо, вам буде зручніше його встановити. Потрібен PHP5. Після налаштування ви можете забути про це, працюйте як звичайно на стільки супер білих інтервалів та коментованих файлів css або js, скільки захочете, і мінімізувати їх буде стиснути на льоту.
mahalie

13

На даний момент CSSO є найкращим мініфікатором / оптимізатором.


2
Данно про "найкращих", але варто подивитися.
Пол Д. Уейт

Просто спробуйте, і ви побачите, що це найкраще. На даний момент немає аналогів його техніці мінімізації.
мовчазний

1
добре, я порівнював CSSO з компресором YUI на тестовому файлі 30 Кб, і після отримання компресованого виводу обох інструментів CSSO виграє, стиснувши файл додатковими 7 байтами. Це, звичайно, лише один тестовий файл.
Пол Д. Уейт

зменшити CSS онлайн за допомогою CSSO: css.github.io/csso/csso.html
tomByrer

Принаймні, це одне з двох рекомендованих Google PageSpeed ​​Insights .
Алекс Ван

8

Якщо ви використовуєте Python, я б рекомендував slimmer, який, мабуть, не такий швидкий, як YUI Compressor, але на відміну від csscompressor.net, він не задихається на CSS-хаках.

Я упереджений, оскільки писав стрункіше, і зараз оцінюю компресор YUI, щоб побачити, як він обробляє хаки. Приклад стрункішої дії можна побачити, якщо переглянути джерело 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 (який не усунув дублікатів для # тестування). І все-таки обидва мене не задовольнили html,body{width:100%;height:100%}body{padding:0}(що, на моє розуміння, рівнозначно, оскільки обидва селектори мають однакову специфіку).
drdaeman

CSS - це одне, де іноді прийнятні шалені хаки. Деякі з цих хаків використовують дивні хитрощі з коментарями, які мініфікція може зламати.
Брендон

4

Я написав ультра швидкий міні-інтерфейс CSS в C #. Але алгоритм не обробляє Javascript. Це: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


Гарний варіант. Хоча один запит: ви сказали: "Відповідно до специфікації CSS, підтримуються два типи рядків: одноцитовані та подвійні. Мій алгоритм залишає рядок недоторканим, навіть якщо символи пробілів знайдені всередині нього ... Я просто думаю, що тримати рядок незмінною є більш інтуїтивно зрозумілим та професійним. " Напевно будь-які символи пробілу, які не додають значення, повинні бути видалені, щоб зробити вихідний файл якомога меншим? Чи не в цьому суть мінімізації?
Пол Д. Уейт

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

4

Спробуйте таблиці закриття стилів .

Крім мінімізації він також підтримує підшивку , перегортання RTL та перейменування класів .

Він також може додавати змінні , функції , умовні умови та комбінації до CSS.

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


як ви користуєтеся ним на windows? пробачте моє незнання
користувач2513846

3

Якщо ви шукаєте щось у PHP, ось посилання: -

Без жирів Minify

Хоча це і є частиною PHP Fat-Free Framework, його також можна використовувати окремо.


Fat Free Framework є GPL, і тому я припускаю, що ця частина їх коду теж є. Просто підйоми голови.
CodeReaper

У ньому є помилки: S погана ідея.
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, роздільна здатність tilde (~) у ваших визначеннях фонового зображення тощо тощо. Це щільно, добре задокументовано, і я використовував це у всіх своїх останніх проектах w / o питання. Перевірте це - gStyleManager.com


3

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


2

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

У будь-якому випадку посилання http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )



2

Інтернет-інструмент (набагато краще, ніж www.csscompressor.net, який підняв мою програму css up): 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 в один клік


Звичайно, хоча я не думаю, що існує багато міні-фіфікерів, для їх запуску потрібно більше одного клацання.
Пол Д. Уейт

Ви маєте право Павло :), але цей робить набагато більше, ніж просто мінімізувати, і все в один клік
Тамік Созієв,

1

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


2
Впевнений; хоча його мініатюром CSS є компресор YUI.
Пол Д. Уейт
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.