Adakah rekomendasi untuk pengubah CSS? [Tutup]

289

Adakah rekomendasi untuk pengubah CSS?

Saya akan menjelajahi Google dan mencoba beberapa, tetapi saya curiga bahwa komunitas StackOverflow yang cerdas, mahir dan tampan mungkin telah mengevaluasi pro dan kontra dari kelas berat.

css minify

— Paul D. Waite
sumber

5

Lihat stackoverflow.com/questions/702907/…

— Julien

20

Pecah. Saya telah membaca 'Cara Mencari Teman dan Mempengaruhi Orang'. Tapi tidak cukup dekat .

— Paul D. Waite

17

Kalian semua aneh. Kami cerdas, cakap, dan tampan.

— Chuck Le Butt

2

Lihat juga: stackoverflow.com/q/65491/85414

— mahalie

3

Beri +1 hanya untuk memahami 'sifat yang berubah' dari hal-hal di sekitar sini, dan memahami serta menjelaskan alasan untuk menutup pertanyaan seperti ini - meskipun itu milik Anda! ;)

— Andrew Barber

98

The YUI Compressor fantastis. Ini berfungsi pada JavaScript dan CSS. Saksikan berikut ini.

— Sobat
sumber

4

Menambah ini, di sini adalah Makefile yang akan mengunduh YUI Compressor, kemas file Anda, dan minify mereka. github.com/balupton/jquery-sparkle/blob/…

— balupton

refresh-sf.com/yui/#output

— Junior Mayhé

@ JuniorMayhé Saya menggunakannya dan gaya saya benar-benar kacau meskipun saya telah memeriksa "Minify saja, tidak ada simbol yang membingungkan." option) ... sayangnya setiap minifier yang saya coba selalu merusak gaya saya. Apakah karena minifiers daring semuanya omong kosong? Seharusnya tidak seperti itu.

— dialex

1

@DiAlex Saya mengerti banyak dari mereka yang mengacaukan kode kita, kita harus menggunakannya dengan hati-hati, selalu memilih pendekatan "konservatif" dan bukan anjak piutang yang agresif. Konservatif hanya akan menghapus ruang yang tidak perlu, membuntuti titik koma, gaya duplikat, dan sebagainya. Saya pikir sebuah style dapat dirusak dengan mudah oleh minifiers ini jika kita menggunakan beberapa css hacks di dalam kode css. Garis miring terbalik dan simbol aneh bisa membuat kompresor gila.

— Junior Mayhé

Anda dapat mencoba layanan online zbugs.com - menggunakan kompresor yui untuk memperkecil file Anda.

— Tamik Soziev

45

Ada juga .NET port dari YUI Compressor yang memungkinkan Anda untuk: -

mengintegrasikan minifikasi / file yang menggabungkan ke dalam peristiwa pasca-pembangunan Visual Studio
terintegrasi ke dalam TFS Build (termasuk CI)
jika Anda ingin menggunakan dll dalam kode Anda sendiri (mis. on the fly minification).

UPDATE 2011: Dan sekarang tersedia juga melalui NuGet :)

— Murni
sumber

Saya agak bingung. Kompresor YUI tidak digunakan lagi karena UglifyJS ( demo ). Apakah masuk akal untuk bekerja pada port .NET?

— Martin Vseticka

Pasangan. Saya memulai port itu pada tahun 2008 atau lebih. Itu 6 tahun yang aneh lalu. Saya juga memposting jawaban ini di '09. Jadi tolong periksa tanggal dan dapatkan beberapa konteks sebelum Anda bertanya q konyol. Sekarang, keluar dan bermainlah sedikit :)

— Pure.Krome

Pure.Krome: Saya mohon berbeda. Saya telah melihat repo GitHub dan sudah berumur beberapa bulan dan komitmennya berasal dari tahun ini. Itulah mengapa saya bertanya. "Pasangan".

— Martin Vseticka

: bertepuk pelan: terlihat dengan baik! Anda sebenarnya baik-baik saja --- oh. Tunggu. Saya memulai proj di codeplex: yuicompressor.codeplex.com . Pertama komit 7 Juli 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Kemudian pindah ke GH tahun ini . Saya belum melakukan pekerjaan porting untuk waktu yang lama. Hanya ada beberapa perbaikan bug aneh di sana-sini. Begitu. Kawan Saya port ED itu. Tidak pelabuhan ing itu. Sedang dalam mode pemeliharaan. QED

— Pure.Krome

1

Anda juga :) Dan sorak-sorai untuk tautan ke UglifyJS - itu adalah sesuatu yang ingin saya periksa untuk melihat apakah kami dapat menggunakannya di tempat kerja - dan Anda baru saja mengingatkan kami tentang hal itu! Cheers :)

— Pure.Krome

19

Saya suka Minify . Dalam PHP dan bekerja dengan CSS atau JavaScript.

— artlung
sumber

2

+1 untuk Minify. Jika Anda sudah terbiasa dengan PHP, Anda mungkin lebih nyaman menginstalnya. Membutuhkan PHP5. Setelah Anda mengaturnya, Anda bisa melupakannya, bekerja seperti biasa pada banyak file css atau js super-spasi dan berkomentar sebanyak yang Anda inginkan dan minify akan mengompres mereka dengan cepat.

— Mahalie

13

CSSO saat ini adalah minifier / optimizer terbaik.

— diam
sumber

2

Tidak tahu tentang "yang terbaik", tetapi patut dilihat.

— Paul D. Waite

Coba saja dan Anda akan menemukan yang terbaik. Tidak ada analog untuk teknik minifikasi untuk saat ini seperti yang saya tahu.

— diam

1

Alrighty, saya telah membandingkan CSSO ke YUI Compressor pada file uji 30 KB, dan setelah gzipping output terkompresi dari kedua alat, CSSO menang, setelah mengompresi file dengan tambahan 7 byte. Itu hanya satu file tes saja.

— Paul D. Waite

kurangi CSS online dengan CSSO: css.github.io/csso/csso.html

— tomByrer

Setidaknya itu salah satu dari dua yang direkomendasikan oleh Google PageSpeed Insights .

— Alex Vang

8

Jika Anda menggunakan Python saya akan merekomendasikan lebih ramping yang mungkin tidak secepat Kompresor YUI tetapi tidak seperti csscompressor.net tidak tersedak pada peretasan CSS.

Saya bias karena saya menulis lebih ramping dan saya sedang mengevaluasi YUI Compressor untuk melihat bagaimana ia menangani peretasan. Contoh tindakan yang lebih ramping dapat dilihat jika Anda melihat sumber crosstips.org

— Peter Bengtsson
sumber

6

Lihat CSSTidy: http://csstidy.sourceforge.net/usage.php

Dan online di: http://cdburnerxp.se/cssparse/css_optimiser.php

— Murali Bala
sumber

Ini yang terbaik. Terima kasih

— FDisk

Versi online yang dimodifikasi yang mendukung CSS3 tersedia di devilo.us

— rafleo

6

Jika Anda mencari alat online, coba ini: https://csscompressor.net/

— miguelSantirso
sumber

1

Saya berharap saya bisa memilih jawaban ini (sudah terlambat setelah saya membatalkannya). Saya mencoba untuk mengompres css saya dan merusak beberapa hal. Itu tidak baik sama sekali. Peringatan untuk semua orang di luar sana, tebakan saya adalah bahwa kecuali jika Anda memiliki standar css yang sesuai dengan standar yang asli, itu mungkin akan menghancurkan Anda!

— BT

19

Tetapi, bukankah seharusnya Anda memiliki CSS yang memenuhi standar dan murni?

— Chuck Le Butt

2

jika Anda menggunakan HTML5 boilerplate, tidak.

— SkaveRat

Alat yang bagus. Saya sudah mengujinya html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}dan itu bekerja lebih baik daripada Kompresor YUI (yang tidak menghilangkan duplikat untuk padding # test). Namun, keduanya gagal memuaskan saya html,body{width:100%;height:100%}body{padding:0}(yang, dalam pemahaman saya, setara, karena kedua penyeleksi memiliki spesifisitas yang sama).

— drdaeman

CSS adalah satu hal di mana hack yang jelek terkadang dapat diterima. Beberapa dari peretasan itu menggunakan trik komentar aneh yang dapat dihancurkan oleh minifiction.

— Brandon

4

Saya telah menulis pengubah CSS ultra cepat di C #. Algoritma tidak menangani Javascript. Ini kamu: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .

— Kerido
sumber

Opsi yang terlihat bagus. Namun satu permintaan: Anda mengatakan “Menurut spesifikasi CSS, dua jenis string didukung: kutip tunggal dan kutip ganda. Algoritme saya membiarkan string tetap utuh, bahkan jika karakter spasi ditemukan di dalamnya ... Saya hanya berpikir bahwa menjaga string yang tidak dimodifikasi lebih intuitif dan profesional. " Tentunya setiap karakter spasi yang tidak menambah makna harus dihapus, untuk membuat file output sekecil mungkin? Bukankah itu titik minifikasi?

— Paul D. Waite

3

Nah, menurut saya ini benar dalam kasus umum. Tetapi saya menganggap string sebagai kasus khusus. Terserah pengembang CSS asli apakah atau tidak menghapus spasi kosong dari string. Algoritma yang saya tampilkan cukup mengikuti spesifikasi menjaga string tidak dimodifikasi.

— Kerido

4

Coba penutup-stylesheet .

Selain minifikasi , juga mendukung linting , RTL flipping , dan penggantian nama kelas .

Itu juga dapat menambahkan variabel , fungsi , kondisional , dan mixin ke CSS.

Perhatikan juga bahwa beberapa fitur ini bergantung pada Alat Penutupan lainnya (yang sangat kuat sendiri).

— Andrzej Duś
sumber

bagaimana Anda menggunakannya di windows? maafkan ketidaktahuan saya

— user2513846

3

Jika Anda mencari sesuatu di PHP, inilah tautannya: -

Minify Bebas Lemak

Meskipun ini merupakan bagian dari Kerangka Kerja Bebas Lemak PHP, ini juga dapat digunakan secara terpisah.

— bcosca
sumber

Kerangka Kerja Bebas Lemak adalah GPL dan karenanya saya menganggap ini bagian dari kode mereka juga. Hanya kepala.

— CodeReaper

Ini memiliki bug: S ide buruk.

— brunoais

3

Saya menemukan bahwa SuperScrub CSS isnoop bekerja dengan sangat baik. Ini hanya dapat menangani tautan langsung ke CSS online: / Anda dapat menyiasatinya dengan menggunakan layanan pastebin pilihan Anda untuk memegang kode css dan hanya memberikan SuperScrub tautan mentah.

— John Michel
sumber

Saya sudah mencobanya #test { padding: 1em; width: 10em; } #test { padding: 2em; }dan gagal.

— drdaeman

@drdaeman Itu mungkin karena tidak tahu apa yang harus dilakukan dengan nilai yang bertentangan / duplikat untuk pemilih tertentu. Karena saya tidak memelihara SuperScrub, saya tidak bisa memberi tahu Anda kapan atau apakah itu akan diperbaiki.

— John Michel

3

Jika situs Anda menggunakan ASP.NET, Anda dapat membiarkan situs Anda melakukan minifikasi CSS dengan cepat (jadi Anda tidak harus melakukannya secara manual setiap kali Anda melakukan perubahan). Misalnya dengan ini:

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

— Katz
sumber

3

Perl memiliki CSS :: Minifier (dan versi XS untuk kecepatan ekstra).

— Eter
sumber

3

Yang lain menyebutkan Kompresor YUI, lalu port .NET, dan saya akan menambahkan tautan lain ke rantai. StyleManager adalah kontrol server yang membungkus port .NET YUI Compressor sehingga Anda dapat menggunakannya sama seperti Anda terbiasa menggunakan ScriptManager. Ini menambahkan banyak fitur bagus lainnya juga, seperti konstanta CSS, resolusi tilde (~) tanpa definisi gambar latar belakang Anda, dll. Ini ketat, didokumentasikan dengan baik, dan saya telah menggunakannya pada semua proyek terbaru saya tanpa o masalah. Lihatlah - gStyleManager.com

— andrew
sumber

3

Masih "dalam versi beta", tetapi harus bekerja dengan cukup baik. Saya menggunakan kode di belakangnya dalam setiap proyek: http://claudiu.phpfogapp.com/ Ini dibangun dalam PHP dan juga menampung file * .css Anda untuk waktu yang cukup besar, tentu cukup untuk memungkinkan Anda menguji kode Anda dengan css yang diperkecil. (Saya hanya akan menghapus file css lama jika ruang menjadi ramai di server).

— Claudiu
sumber

2

Ada proyek codeplex yang akan terhubung ke situs web .net yang akan memperkecil dan mengompresi file CSS dan JS. Ada juga perbandingan antara Microsoft AJAX Minifier dan YUI Compressor yang menunjukkan YUI keluar sedikit lebih baik. Ada variasi tambahan yang menggabungkan Microsoft Minifier dan kompresi yang secara drastis memangkas file.

Pokoknya tautannya adalah http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )

— Jonathan Stanton
sumber

2

Inilah yang saya lakukan untuk MVC3: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html Keindahan dari pendekatan ini adalah bahwa ia melakukan semuanya dengan cepat dan Anda tidak perlu melakukan pra-proses file secara manual atau mengkonfigurasi post-build.

— m_kramar
sumber

2

Alat online (jauh lebih baik daripada www.csscompressor.net yang mendongkrak css saya): http://www.cssdrive.com/compressor/compress.php melakukan pekerjaan yang sangat baik.

— BT
sumber

Memiliki bug. Dalam situasi tertentu rusak kode js sangat baik

— brunoais

1

Contoh 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
sumber

1

zbugs.com akan menjadi alat online yang bagus untuk Anda, itu akan mengurangi css Anda dalam satu klik

— Tamik Soziev
sumber

Tentu, meskipun saya tidak berpikir ada banyak minifiers yang membutuhkan lebih dari satu klik untuk memulainya.

— Paul D. Waite

Anda benar Paul :) tetapi yang ini melakukan lebih dari sekadar mengecilkan, dan semuanya dalam satu klik

— Tamik Soziev

1

Mengintip HTML5BoilerPlate terbaru oleh Paul Irish - ini berisi skrip build untuk mengecilkan semua aset Anda (termasuk PNG dan JPG). Anda dapat melihat video demo di sini .

— Ben Hughes
sumber

2

Tentu; CSS minifier-nya adalah YUI Compressor.

— Paul D. Waite