Jakieś rekomendacje dla minimalizatora CSS? [Zamknięte]


289

Jakieś rekomendacje dla minimalizatora CSS?

Będę rootować w Google i wypróbować trochę, ale podejrzewałem, że inteligentna, sprawna i ciekawie przystojna społeczność StackOverflow mogła już ocenić zalety i wady ciężkich graczy.



20
Odpadł Czytałem „Jak zdobywać przyjaciół i wpływać na ludzi”. Jednak nie dość ściśle .
Paul D. Waite

17
Wszyscy jesteście dziwni. Jesteśmy mądrzy, sprawni i osobliwie przystojni.
Chuck Le Butt,


3
Daj +1 tylko za zrozumienie „zmieniającej się natury” rzeczy tutaj oraz zrozumienie i wyjaśnienie powodów zamykania takich pytań - nawet jeśli to twoje! ;)
Andrew Barber

Odpowiedzi:


98

YUI Compressor jest fantastyczne. Działa na JavaScript i CSS. Sprawdź to.


4
Dodając do tego, tutaj jest Makefile, który pobierze kompresor YUI, spakuje twoje pliki i zminimalizuje je. github.com/balupton/jquery-sparkle/blob/…
balupton


@ JuniorMayhé Użyłem go i moje style zostały całkowicie pomieszane, chociaż zaznaczyłem „Tylko minimalizuj, bez zaciemniania symboli”. opcja) ... niestety każdy próbnik, który próbuję, zawsze łamie mój styl. Czy to dlatego, że minizery online to bzdury? Nie powinno tak być.
dialex,

1
@DiAlex Rozumiem wiele z nich bałagan w naszym kodzie, musimy ich używać ostrożnie, zawsze wybierając podejście „konserwatywne”, a nie agresywne faktoring. Konserwatysta usunąłby tylko niepotrzebne spacje, końcowe średniki, zduplikowane style i tak dalej. Myślę, że styl może zostać łatwo uszkodzony przez te minizery, jeśli użyjemy hacków css wewnątrz kodu css. Odwrotne ukośniki i dziwne symbole mogą doprowadzić do szaleństwa sprężarki.
Junior Mayhé,

Możesz wypróbować usługę online zbugs.com - używa ona kompresora Yui w celu zminimalizowania plików.
Tamik Soziev

45

Istnieje również port .NET kompresora YUI, który umożliwia:

  • zintegruj plik minifikacji / pliku w zdarzenia po kompilacji programu Visual Studio
  • zintegrować w kompilację TFS (w tym CI)
  • jeśli chcesz po prostu użyć bibliotek DLL we własnym kodzie (np. w locie).

AKTUALIZACJA 2011: I jest teraz dostępna również przez NuGet :)


Jestem trochę zmieszany. Kompresor YUI jest przestarzały na korzyść UglifyJS ( wersja demo ). Czy warto pracować na porcie .NET?
Martin Vseticka

Kumpel. Zacząłem ten port w 2008 roku. To 6 nieparzystych lat temu. Opublikowałem również tę odpowiedź w '09. Więc sprawdź daty i uzyskaj kontekst, zanim zapytasz głupie q. A teraz wyjdź na zewnątrz i pobaw się trochę :)
Pure.Krome

Pure.Krome: Zaczynam się różnić. Obejrzałem repozytorium GitHub, które ma kilka miesięcy, a zatwierdzenia pochodzą z tego roku. Dlatego spytałem. "Kumpel".
Martin Vseticka

: powolne klaskanie: dobrze zauważony! właściwie jesteś prawy --- och. Czekać. Uruchomiłem pro na codeplex: yuicompressor.codeplex.com . Pierwsze zatwierdzenie 7 lipca 2008 r. ( Yuicompressor.codeplex.com/SourceControl/changeset/… ). Następnie przeniosłem go do GH w tym roku . Nie wykonałem żadnej pracy przy przenoszeniu go przez długi czas. Tu i tam pojawiło się tylko kilka dziwnych poprawek. Więc. Koleś. I portu ED to. Nie portu ing go. Jest w trybie konserwacji. QED
Pure.Krome

1
Ty też :) I pozdrawiam link do UglifyJS - to było coś, co chciałem sprawdzić, czy możemy go użyć w pracy - i właśnie nam o tym przypomniałeś! na zdrowie :)
Pure.Krome

19

Lubię Minify . W PHP i współpracuje z CSS lub JavaScript.


2
+1 za Minify. Jeśli znasz już PHP, możesz wygodniej go zainstalować. Wymaga PHP5. Po skonfigurowaniu możesz o tym zapomnieć, pracować tak normalnie na tylu białych i skomentowanych plikach css lub js, jak chcesz, a minify skompresuje je w locie.
mahalie

13

CSSO jest obecnie najlepszym minifigatorem / optymalizatorem.


2
Nie wiem o „najlepszym”, ale wartym obejrzenia.
Paul D. Waite,

Po prostu spróbuj, a przekonasz się, że jest najlepszy. Jak na razie nie ma analogii do jego technik minimalizacji.
cichy

1
dobrze, porównałem CSSO z kompresorem YUI w pliku testowym o rozmiarze 30 KB, a po skompresowaniu skompresowanych danych wyjściowych obu narzędzi, CSSO wygrywa, kompresując plik o dodatkowe 7 bajtów. Oczywiście to tylko jeden plik testowy.
Paul D. Waite,

zredukuj CSS online za pomocą CSSO: css.github.io/csso/csso.html
tomByrer

Przynajmniej jest to jeden z dwóch zalecanych przez Google PageSpeed ​​Insights .
Alex Vang

8

Jeśli używasz Pythona, polecam szczuplejszego, który prawdopodobnie nie jest tak szybki jak YUI Compressor, ale w przeciwieństwie do csscompressor.net, nie dusi się w hackach CSS.

Jestem stronniczy, odkąd napisałem szczuplejsze i obecnie oceniam YUI Compressor, aby zobaczyć, jak radzi sobie z hackami. Przykład szczuplejszego w akcji można zobaczyć, przeglądając źródło crosstips.org



6

Jeśli szukasz narzędzia online, spróbuj tego: https://csscompressor.net/


1
Chciałbym móc głosować za odrzuceniem tej odpowiedzi (jest już za późno, kiedy ją głosowałem). Próbuję skompresować mój css i to psuje rzeczy. To wcale nie jest dobre. Ostrzeżenie dla wszystkich tam, sądzę, że jeśli nie masz nieskazitelnych standardów zgodnych z css, może to zepsuć twoje gówno!
BT

19
Ale nie powinien pan mieć dziewiczy, standardy CSS zgodny?
Chuck Le Butt,

2
jeśli używasz bojlera HTML5, nie.
SkaveRat

Niezłe narzędzie. Przetestowałem to html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}i działało lepiej niż Kompresor YUI (który nie wyeliminował duplikatów dla # wypełnienia testu). Mimo to oba mi nie zadowoliły html,body{width:100%;height:100%}body{padding:0}(co w moim rozumieniu jest równoważne, ponieważ oba selektory mają tę samą specyficzność).
drdaeman

CSS to jedyna rzecz, w której nieudolne hacki są czasami akceptowane. Niektóre z tych hacków wykorzystują dziwne sztuczki komentujące, które mogą przerwać minifikcja.
Brandon,

4

Napisałem ultra szybki CSS minifier w C #. Algorytm nie obsługuje Javascript. Twoje: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


Ładna opcja. Jedno zapytanie: powiedziałeś „Zgodnie ze specyfikacją CSS obsługiwane są dwa typy ciągów: jedno- i dwu-cudzysłowy. Mój algorytm pozostawia ciąg nienaruszony, nawet jeśli wewnątrz niego znajdują się białe znaki ... Po prostu myślę, że utrzymanie niezmodyfikowanego ciągu jest bardziej intuicyjne i profesjonalne. ” Z pewnością należy usunąć wszelkie spacje, które nie dodają znaczenia, aby plik wyjściowy był tak mały, jak to możliwe? Czy to nie jest cel minimalizacji?
Paul D. Waite,

3
Cóż, moim zdaniem jest to z pewnością słuszne w ogólnym przypadku. Ale ciągi uważam za szczególny przypadek. Od twórcy oryginalnego CSS zależy, czy usunąć bez znaczenia białe znaki z ciągów znaków. Algorytm, który pokazuję, po prostu jest zgodny ze specyfikacją, utrzymując ciąg niezmodyfikowany.
Kerido,

4

Wypróbuj arkusze stylów zamknięcia .

Obok minifikacji obsługuje również strzępienie , RTL skakaniu i klasowej zmiany nazwy .

Może również dodawać zmienne , funkcje , warunki i miksy do CSS.

Pamiętaj również, że niektóre z tych funkcji zależą od pozostałych narzędzi zamykania (które same w sobie są bardzo potężne).


jak go używać w systemie Windows? wybacz moją ignorancję
user2513846,

3

Jeśli szukasz czegoś w PHP, oto link: -

Beztłuszczowe Minify

Chociaż jest częścią frameworka Fat-Free Framework, może być również używany samodzielnie.


Fat Free Framework to GPL, więc zakładam, że ta część ich kodu też jest. Tylko głowa do góry.
CodeReaper

Ma błędy: zły pomysł.
brunoais

3

Uważam, że CSS SuperScrub isnoop działa bardzo dobrze. Może jednak obsługiwać tylko bezpośrednie łącza do CSS online: / Można to obejść, używając preferowanej usługi pastebin do przechowywania kodu css i po prostu dając SuperScrub nieprzetworzony link.


Próbowałem #test { padding: 1em; width: 10em; } #test { padding: 2em; }i nie udało się.
drdaeman

@drdaeman Prawdopodobnie dlatego, że nie wie, co zrobić z konfliktowymi / zduplikowanymi wartościami dla danego selektora. Ponieważ nie utrzymuję SuperScrub, nie mogę powiedzieć, kiedy i czy zostanie to naprawione.
John Michel



3

Inni wspominali o kompresorze YUI, a następnie o jego porcie .NET, a ja dodam kolejne łącze do łańcucha. StyleManager to kontrolka serwera, która zamyka port .NET kompresora YUI, dzięki czemu można go używać tak samo, jak przyzwyczajono się do korzystania z ScriptManager. Dodaje też wiele innych fajnych funkcji, takich jak stałe CSS, rozdzielczość tyldy (~) w / w definicjach obrazu tła itp. Jest ścisła, dobrze udokumentowana i używałem jej we wszystkich moich ostatnich projektach w / o problem. Sprawdź to - gStyleManager.com


3

Wciąż „w fazie beta”, ale powinien działać całkiem dobrze. Używam tego kodu w każdym projekcie: http://claudiu.phpfogapp.com/ Jest wbudowany w PHP i również utrzymuje plik * .css przez dość długi czas, na pewno wystarczający, aby przetestować kod za pomocą zminimalizowane css. (Usuwałbym stare pliki css tylko wtedy, gdy przestrzeń zapełni się na serwerze).


2

Istnieje projekt codeplex, który podłącza się do stron internetowych .net, które zmniejszają i kompresują pliki CSS i JS. Istnieje również porównanie między Microsoft AJAX Minifier i YUI Compressor, który pokazuje, że YUI wychodzi nieco lepiej. Istnieje dodatkowa odmiana, która łączy Minifikator Microsoft i kompresję, które drastycznie zatopiły plik.

W każdym razie link to http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )




1

Przykład 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 będzie dla ciebie dobrym narzędziem online, zmniejszy twój css jednym kliknięciem


Jasne, choć nie sądzę, że istnieje wiele minizestawów, które wymagają więcej niż jednego kliknięcia, aby je uruchomić.
Paul D. Waite,

Masz rację, Paul :) ale ten robi o wiele więcej niż tylko minimalizuje, a wszystko za jednym kliknięciem
Tamik Soziev

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.