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.

Paul D. Waite
źródło
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,
2
Zobacz także: stackoverflow.com/q/65491/85414
mahalie
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.

Kumpel
źródło
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 :)

Pure.Krome
źródło
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.

artlung
źródło
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.

cichy
źródło
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

Peter Bengtsson
źródło
6

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

miguelSantirso
źródło
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 .

Kerido
źródło
Ł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).

Andrzej Duś
źródło
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.

bcosca
źródło
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.

John Michel
źródło
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

Andrzej
źródło
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).

Claudiu
źródło
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 )

Jonathan Stanton
źródło
2

Narzędzie online (znacznie lepsze niż www.csscompressor.net, które podbiło mój css up): http://www.cssdrive.com/compressor/compress.php wykonuje doskonałą robotę.

BT
źródło
Ma błędy. W szczególnych sytuacjach łamie doskonale dobry kod js
brunoais
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*", ";");
Marcelo Gondim
źródło
1

zbugs.com będzie dla ciebie dobrym narzędziem online, zmniejszy twój css jednym kliknięciem

Tamik Soziev
źródło
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
1

Rzuć okiem na najnowszą wersję HTML5BoilerPlate autorstwa Paula Irisha - zawiera ona skrypt kompilacji, aby zminimalizować wszystkie twoje zasoby (w tym pliki PNG i JPG). Można zobaczyć film demo tutaj .

Ben Hughes
źródło
2
Pewnie; jego minimalizatorem CSS jest jednak YUI Compressor.
Paul D. Waite