Qualche consiglio per un minificatore CSS? [chiuso]


289

Qualche consiglio per un minificatore CSS?

Eseguirò il rooting su Google e ne proverò alcuni, ma sospettavo che la comunità StackOverflow intelligente, competente e curiosamente attraente potesse aver già valutato i pro e i contro dei pesi massimi.



20
Arrestato. Ho letto "Come fare amicizia e influenzare le persone". Non abbastanza da vicino però .
Paul D. Waite,

17
Ragazzi siete tutti strani. Siamo intelligenti, competenti e curiosamente belli.
Chuck Le Butt,


3
+1 solo per comprendere la "natura mutevole" delle cose qui intorno e comprendere e spiegare il ragionamento per chiudere domande come questa - anche se è tua! ;)
Andrew Barber,

Risposte:


98

Il compressore YUI è fantastico. Funziona su JavaScript e CSS. Controlla.


4
Aggiungendo a questo, ecco un Makefile che scaricherà il Compressore YUI, comprimerà i tuoi file e li minimizzerà. github.com/balupton/jquery-sparkle/blob/…
balupton,


@ JuniorMayhé L'ho usato e i miei stili erano completamente incasinati anche se avevo controllato "Solo minimizza, nessun offuscamento dei simboli". opzione) ... purtroppo ogni minificatore che provo rompe sempre i miei stili. È perché i minificatori online sono tutti una schifezza? Non dovrebbe essere così.
dialex,

1
@DiAlex Capisco molti di questi problemi con il nostro codice, dobbiamo usarli con attenzione, scegliendo sempre un approccio "conservativo" e non un aggressivo re-factoring. Un conservatore rimuove solo gli spazi non necessari, trascina i punti e virgola, gli stili duplicati e così via. Penso che uno stile possa essere facilmente danneggiato da questi minificatori se usiamo alcuni hack CSS all'interno del codice CSS. Le barre rovesciate e i simboli strani potrebbero far impazzire il compressore.
Junior Mayhé,

Puoi provare il servizio online zbugs.com - usa il compressore yui per minimizzare i tuoi file.
Tamik Soziev,

45

C'è anche una porta .NET di YUI Compressor che ti consente di: -

  • integrare la minificazione / il file combinandoli negli eventi post-build di Visual Studio
  • integrato in una build TFS (incluso CI)
  • se si desidera semplicemente utilizzare le DLL nel proprio codice (ad es. minificazione al volo).

AGGIORNAMENTO 2011: ora è disponibile anche tramite NuGet :)


Sono un po 'confuso. YUI Compressor è deprecato a favore di UglifyJS ( demo ). Ha senso lavorare su una porta .NET?
Martin Vseticka,

Compagno. Ho iniziato quella porta nel 2008 o giù di lì. Sono 6 anni dispari. Ho anche pubblicato questa risposta nel '09. Quindi, controlla le date e ottieni un contesto prima di chiedere domande stupide. Ora,
esci

Pure.Krome: mi permetto di dissentire. Ho esaminato il repository GitHub, ha pochi mesi e gli impegni sono di quest'anno. Ecco perché ho chiesto. "Compagno".
Martin Vseticka,

: applauso lento: ben individuato! in realtà sei giusto --- oh. Aspettare. Ho avviato il progetto su codeplex: yuicompressor.codeplex.com . Primo commit 7 luglio 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Quindi lo ha spostato in GH quest'anno . Non ho fatto alcun lavoro sul porting per un lungo periodo. Ci sono state solo alcune strane correzioni di bug qua e là. Così. Tipo. Lo porto ED . Non eseguire il porting . È in modalità manutenzione. QED
Pure.Krome,

1
Anche a te :) E tifo per il link a UglifyJS - era qualcosa che volevo dare un'occhiata per vedere se possiamo usarlo sul lavoro - e ci hai appena ricordato! salute :)
Pure.Krome,

19

Mi piace Minify . In PHP e funziona con CSS o JavaScript.


2
+1 per Minify. Se hai già familiarità con PHP, potresti essere più comodo installarlo. Richiede PHP5. Una volta impostato, puoi dimenticartene, lavorare normalmente su tutti i file css o js super spaziati e commentati che desideri e minimizza li comprimerà al volo.
Mahalie,

13

CSSO è attualmente il miglior minificatore / ottimizzatore.


2
Non so "il migliore", ma vale la pena dare un'occhiata.
Paul D. Waite,

Provalo e scoprirai che è il migliore. Non ci sono analoghi per le sue tecniche di minificazione per questo momento, per quanto ne so.
silenzioso,

1
va bene, ho confrontato CSSO con YUI Compressor su un file di test da 30 KB e dopo aver compresso l'output compresso di entrambi gli strumenti, CSSO vince, dopo aver compresso il file di altri 7 byte. Questo è ovviamente solo un file di prova.
Paul D. Waite,

ridurre CSS online con CSSO: css.github.io/csso/csso.html
tomByrer

Almeno è uno dei due consigliati da Google Page Speed ​​Insights .
Alex Vang,

8

Se usi Python, consiglierei un prodotto più snello che probabilmente non è veloce come YUI Compressor ma a differenza di csscompressor.net non soffoca sugli hack CSS.

Sono di parte da quando ho scritto più snello e attualmente sto valutando YUI Compressor per vedere come gestisce gli hack. Un esempio di dimagrimento in azione può essere visto se si visualizza la fonte di crosstips.org



6

Se stai cercando uno strumento online, prova questo: https://csscompressor.net/


1
Vorrei poter votare questa risposta (è già troppo tardi dopo averla votata). Sto cercando di comprimere il mio CSS e si rompe le cose. Non va affatto bene. Avvertendo tutti là fuori, la mia ipotesi è che se non si dispone di CSS incontaminati conformi agli standard, potrebbe spezzare la tua merda!
BT,

19
Ma non dovresti avere CSS incontaminati e conformi agli standard?
Chuck Le Butt,

2
se stai usando HTML5 boilerplate, no.
SkaveRat

Strumento carino. L'ho testato html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}e ha fatto un lavoro migliore rispetto a YUI Compressor (che non ha eliminato i duplicati per l'imbottitura di # test). Tuttavia, entrambi non mi hanno soddisfatto html,body{width:100%;height:100%}body{padding:0}(il che, a mio avviso, è equivalente, poiché entrambi i selettori hanno la stessa specificità).
drdaeman,

CSS è l'unica cosa in cui gli hack scadenti sono talvolta accettabili. Alcuni di quegli hack usano strani trucchi di commento che la minificazione può rompere.
Brandon,

4

Ho scritto un minimizer CSS ultra veloce in C #. Tuttavia, l'algoritmo non gestisce Javascript. Questo: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


Opzione piacevole. Una domanda però: hai detto “Secondo le specifiche CSS, sono supportati due tipi di stringhe: virgolette singole e virgolette doppie. Il mio algoritmo lascia intatta la stringa, anche se al suo interno si trovano caratteri di spazi bianchi ... Penso solo che mantenere la stringa non modificata sia più intuitivo e professionale. " Sicuramente eventuali caratteri di spazio che non aggiungono significato dovrebbero essere rimossi, per rendere il file di output il più piccolo possibile? Non è questo il punto di minificazione?
Paul D. Waite,

3
Bene, secondo me questo è sicuramente giusto in un caso generale. Ma considero le stringhe un caso speciale. Spetta allo sviluppatore del CSS originale se rimuovere o meno spazi vuoti senza significato dalle stringhe. L'algoritmo che sto mostrando segue semplicemente le specifiche mantenendo la stringa non modificata.
Kerido,

4

Prova i fogli di stile di chiusura .

Oltre alla minimizzazione , supporta anche linting , rotazione RTL e ridenominazione di classe .

Può anche aggiungere variabili , funzioni , condizionali e mixin ai CSS.

Si noti inoltre che alcune di queste funzionalità dipendono dal resto degli strumenti di chiusura (che sono molto potenti da soli).


come lo usi su windows? perdona la mia ignoranza
user2513846

3

Se stai cercando qualcosa in PHP, ecco il link: -

Minify senza grassi

Sebbene faccia parte del PHP Fat-Free Framework, può anche essere utilizzato autonomamente.


Il Fat Free Framework è GPL e quindi presumo anche questa parte del loro codice. Solo un avvertimento.
CodeReaper

Ha bug: S cattiva idea.
brunoais,

3

Trovo che SuperScrub CSS di isnoop funzioni molto bene. Tuttavia, può gestire solo collegamenti diretti a CSS online: / Puoi aggirarlo utilizzando il tuo servizio pastebin preferito per contenere il codice CSS e semplicemente dando a SuperScrub il link non elaborato.


L'ho provato #test { padding: 1em; width: 10em; } #test { padding: 2em; }e non è riuscito.
drdaeman,

@drdaeman Probabilmente perché non sa cosa fare con valori in conflitto / duplicati per un determinato selettore. Dal momento che non mantengo SuperScrub, non posso dirti quando o se ciò verrà risolto.
John Michel,



3

Altri hanno menzionato YUI Compressor, quindi la sua porta .NET e aggiungerò un altro collegamento alla catena. StyleManager è un controllo server che avvolge la porta .NET di YUI Compressor in modo che tu possa usarlo come sei abituato a usare ScriptManager. Aggiunge anche un sacco di altre belle funzioni, come le costanti CSS, la risoluzione tilde (~) con le definizioni delle immagini di sfondo, ecc. Ecc. È stretto, ben documentato e l'ho usato su tutti i miei progetti recenti w / o un problema. Dai un'occhiata - gStyleManager.com


3

Ancora "in beta", ma dovrebbe funzionare abbastanza bene. Uso il codice dietro di esso in ogni progetto: http://claudiu.phpfogapp.com/ È incorporato in PHP e ospita anche il tuo file * .css per un periodo abbastanza lungo, sicuramente abbastanza per permetterti di testare il tuo codice con il css minimizzato (Eliminerei i vecchi file CSS solo se lo spazio è ammucchiato sul server).


2

Esiste un progetto codeplex che si collegherà a siti Web .net che minimizzerà e comprimerà i file CSS e JS. C'è anche un confronto tra il Microsoft AJAX Minifier e il compressore YUI che mostra che YUI sta uscendo leggermente meglio. Esiste una variante aggiuntiva che combina Microsoft Minifier e la compressione che drasticamente il file viene srunk.

Ad ogni modo il link è http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )




1

Esempio 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 sarà un buon strumento online per te, minimizzerà i tuoi CSS in un solo clic


Certo, anche se non credo che ci siano molti minificatori che richiedono più di un clic per avviarli.
Paul D. Waite,

Hai ragione Paolo :) ma questo fa molto di più che minimizzare, e tutto in un solo clic
Tamik Soziev,

1

Dai un'occhiata all'ultimo HTML5BoilerPlate di Paul Irish: contiene uno script di build per minimizzare tutte le tue risorse (inclusi PNG e JPG). Puoi vedere un video dimostrativo qui .


2
Sicuro; il suo minificatore CSS è Compressore YUI però.
Paul D. Waite,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.