CSS मिनिफायर के लिए कोई सिफारिशें? [बन्द है]

289

CSS मिनिफायर के लिए कोई सिफारिशें?

मैं Google के आसपास रूट कर रहा हूँ और कुछ बाहर की कोशिश कर रहा हूँ, लेकिन मुझे संदेह था कि स्मार्ट, कुशल और उत्सुक रूप से सुंदर StackOverflow समुदाय ने पहले से ही हैवीवेट के पेशेवरों और विपक्षों का मूल्यांकन किया होगा।

css  minify 
— पॉल डी। वेटे
स्रोत
5
— जुलिएन
20
पर्दाफाश। मैं 'हाउ टू मेक फ्रेंड्स एंड इन्फ्लुएंस पीपल ’पढ़ रहा हूं। हालांकि काफी करीब से नहीं ।
— पॉल डी। वेट
17
आप लोग सब अजीब हैं। हम स्मार्ट, कुशल और उत्सुक रूप से सुंदर हैं।
— चक ले बट
2
इसे भी देखें: stackoverflow.com/q/65491/85414
— mahalie
3
+1 केवल यहाँ के आसपास की 'बदलती प्रकृति' को समझने के लिए, और इस तरह के सवालों को बंद करने के तर्क को समझने और समझाने के लिए - भले ही यह आपका है! ;)
— एंड्रयू बार्बर

जवाबों:

98

YUI कंप्रेसर बढ़िया है। यह जावास्क्रिप्ट और सीएसएस पर काम करता है। इसकी जांच - पड़ताल करें।

— बडी
स्रोत
4
इस पर जोड़ते हुए, यहां एक मेकफाइल है जो YUI कंप्रेसर डाउनलोड करेगा, आपकी फ़ाइलों को पैक करेगा, और उन्हें छोटा करेगा। github.com/balupton/jquery-sparkle/blob/…
— balupton
— जूनियर Mayhé
@ JuniorMayhé मैंने इसका उपयोग किया और मेरी शैली पूरी तरह से गड़बड़ हो गई, हालांकि मैंने जाँच की थी "केवल Minify, कोई प्रतीक नहीं है।" विकल्प) ... दुख की बात है कि मैं हर कोशिश करता हूं कि हमेशा मेरी शैली टूट जाए। क्या यह इसलिए है क्योंकि ऑनलाइन मिनिफ़ायर सभी बकवास हैं? ऐसा नहीं होना चाहिए।
— डायलेक्स
1
@DiAlex मैं समझता हूं कि उनमें से कई हमारे कोड के साथ खिलवाड़ करते हैं, हमें उन्हें सावधानी से उपयोग करना चाहिए, हमेशा "रूढ़िवादी" दृष्टिकोण का चयन करना चाहिए न कि आक्रामक री-फैक्टरिंग। एक रूढ़िवादी केवल अनावश्यक रिक्त स्थान को हटा रहा होगा, अर्धविराम, डुप्लिकेट शैलियों और इतने पर पीछे रह जाएगा। मुझे लगता है कि अगर हम css कोड के अंदर कुछ css हैक्स का उपयोग करते हैं, तो इन minifiers द्वारा एक शैली को आसानी से क्षतिग्रस्त किया जा सकता है। Backslashes और अजीब प्रतीकों कंप्रेसर पागल ड्राइव सकता है।
— जूनियर Mayhé
आप ऑनलाइन सेवा zbugs.com की कोशिश कर सकते हैं - यह आपकी फ़ाइलों को छोटा करने के लिए यूआई कंप्रेसर का उपयोग करता है।
— तामिक सोजिएव
45

YUI कंप्रेसर का .NET पोर्ट भी है जो आपको इसकी अनुमति देता है: -

  • दृश्य स्टूडियो पोस्ट-बिल्ड ईवेंट में संयोजन / फ़ाइल संयोजन को इंटरग्रेट करें
  • एक टीएफएस बिल्ड (सीआई सहित) में बधाई
  • यदि आप बस अपने स्वयं के कोड में dll का उपयोग करना चाहते हैं (उदाहरण के लिए, फ्लाई मिनिफ़िकेशन पर)।

अद्यतन 2011: और यह अब NuGet के माध्यम से भी उपलब्ध है :)

— Pure.Krome
स्रोत
मैं थोड़ा उलझन में हूँ। UUIifyJS ( डेमो ) के पक्ष में YUI कंप्रेसर को हटा दिया गया है । क्या यह एक .NET पोर्ट पर काम करने का एक मतलब है?
— मार्टिन विसेटीका
दोस्त। मैंने 2008 या उसके बाद उस पोर्ट को शुरू किया था। यह 6 साल पहले की बात है। मैंने इसका उत्तर भी '09 'में पोस्ट किया था। इसलिए कृपया तारीखों की जाँच करें और कुछ संदर्भ प्राप्त करें, इससे पहले कि आप मूर्खतापूर्ण प्रश्न पूछें। अब, बाहर जाओ और एक मूत के लिए खेलते हैं :)
— Pure.Krome
Pure.Krome: मैं अलग होने की भीख माँगता हूँ। मैंने GitHub रेपो को देखा है और यह कुछ महीने पुराना है और इस वर्ष के कमिट्स हैं। इसीलिए मैंने पूछा। "दोस्त"।
— मार्टिन विसेटीका
: धीमी ताली: अच्छी तरह से देखा! आप वास्तव में चीर रहे हैं --- ओह। रुको। मैंने codeplex पर proj शुरू किया: yuicompressor.codeplex.com । पहली बार 7 जुलाई 2008 को ( yuicompressor.codeplex.com/SourceControl/changeset/… )। फिर इसे इस साल जीएच पर ले जाया गया । मैंने इसे a.long.time के लिए पोर्ट करने पर कोई काम नहीं किया है। वहाँ केवल कुछ अजीब बग फिक्स यहाँ और वहाँ गया है। इसलिए। Dude। मैं इसे ED पोर्ट करता हूँ। पोर्ट नहीं ing यह। यह रखरखाव मोड में है। QED
— प्योर.क्रोम
1
आप भी :) और UglifyJS के लिंक के लिए जयकार करते हैं - यह कुछ ऐसा था जिसका अर्थ यह देखने के लिए है कि क्या हम इसे काम पर उपयोग कर सकते हैं - और आपने अभी हमें इसके बारे में याद दिलाया है! चीयर्स :)
— प्योर.क्रोम
19

मुझे मिनिफाई पसंद है । PHP में और CSS या JavaScript के साथ काम करता है।

— artlung
स्रोत
2
Minify के लिए +1। यदि आप पहले से ही PHP से परिचित हैं तो आप इसे स्थापित करने में अधिक सहज हो सकते हैं। PHP5 की आवश्यकता है। एक बार जब आप इसे सेट कर लेते हैं, तो आप इसके बारे में भूल सकते हैं, कई सुपर व्हाइट-स्पेस वाले और टिप्पणी की गई सीएसएस या जेएस फाइलों पर सामान्य रूप से काम कर सकते हैं और जैसा कि आप चाहते हैं और उन्हें मक्खी पर संपीड़ित करेगा।
— महाली
13

CSSO वर्तमान में सबसे अच्छा minifier / अनुकूलक है।

— मूक
स्रोत
2
"सबसे अच्छा" के बारे में पता नहीं है, लेकिन एक नज़र के लायक है।
— पॉल डी। वेट
बस इसे आज़माएं और आप पाएंगे कि यह सबसे अच्छा है। जैसा कि मैं जानता हूं कि इस पल के लिए इसकी मिनिमाइजेशन टेकनीक का कोई एनालॉग नहीं है।
— चुपचाप
1
ठीक है, मैंने 30 KB परीक्षण फ़ाइल पर CSSO की तुलना YUI कंप्रेसर से की है, और दोनों उपकरणों के संपीड़ित आउटपुट को अलग करने के बाद, CSSO जीतता है, फ़ाइल को 7 अतिरिक्त बाइट्स से संपीड़ित करता है। हालांकि यह सिर्फ एक परीक्षण फ़ाइल है।
— पॉल डी। वेट
CSSO के साथ CSS को ऑनलाइन कम करें: css.github.io/csso/csso.html
— tomByrer
कम से कम यह Google PageSpeed ​​अंतर्दृष्टि द्वारा अनुशंसित दो में से एक है ।
— एलेक्स वंग
8

यदि आप पायथन का उपयोग करते हैं तो मैं स्लिमर की सिफारिश करूंगा जो कि संभवतः यूयूआई कंप्रेसर जितना तेज़ नहीं है, लेकिन csscompressor.net के विपरीत यह सीएसएस हैक पर चोक नहीं है।

जब से मैंने स्लिमर लिखा है, मैं पक्षपाती हूं और वर्तमान में मैं YUI कंप्रेसर का मूल्यांकन कर रहा हूं कि यह कैसे हैक को हैंडल करता है। यदि आप crosstips.org के स्रोत को देखते हैं तो कार्रवाई में स्लिमर का एक उदाहरण देखा जा सकता है

— पीटर बेंग्सन
स्रोत
6

यदि आप एक ऑनलाइन टूल की तलाश कर रहे हैं, तो यह प्रयास करें: https://csscompressor.net/

— miguelSantirso
स्रोत
1
काश मैं इस जवाब को वोट कर सकता (मैं इसे पहले ही बहुत देर हो चुकी थी)। मैं अपने सीएसएस को संपीड़ित करने की कोशिश कर रहा हूं और यह चीजों को तोड़ता है। यह बिल्कुल अच्छा नहीं है। सभी को चेतावनी देते हुए, मेरा अनुमान है कि जब तक आपके पास प्राचीन मानक अनुरूप सीएसएस नहीं है, तब तक यह आपकी गंदगी को तोड़ सकता है!
— BT
19
लेकिन, क्या आपके पास प्राचीन, मानक अनुरूप सीएसएस नहीं होना चाहिए ?
— चक ले बट
2
यदि आप HTML5 बॉयलरप्लेट का उपयोग कर रहे हैं, तो नहीं।
— स्केवरात
अच्छा उपकरण। मैंने इसका परीक्षण किया है html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}और इसने YUI कंप्रेसर की तुलना में बेहतर काम किया है (जो कि # परीक्षण के पैडिंग के लिए डुप्लिकेट को समाप्त नहीं करता था)। फिर भी, दोनों मुझे संतुष्ट करने में विफल रहे html,body{width:100%;height:100%}body{padding:0}(जो, मेरी समझ में, समतुल्य है, क्योंकि दोनों चयनकर्ताओं में समान विशिष्टता है)।
— ड्रगमैन
सीएसएस एक ऐसी चीज है जहां भद्दे हैक कभी-कभी स्वीकार्य होते हैं। उन हैक्स में से कुछ अजीब टिप्पणी की चाल का उपयोग करते हैं जो मिनीफिकेशन को तोड़ सकते हैं।
— ब्रैंडन
4

मैंने C # में एक अल्ट्रा फास्ट CSS मिनिफायर लिखा है। एल्गोरिथ्म हालाँकि जावास्क्रिप्ट को हैंडल नहीं करता है। यह समझें: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx ।

— Kerido
स्रोत
अच्छा दिखने वाला विकल्प। एक क्वेरी हालांकि: आपने कहा "सीएसएस विनिर्देश के अनुसार, दो प्रकार के तारों का समर्थन किया जाता है: एकल-उद्धृत और दोहरे-उद्धृत। मेरा एल्गोरिथ्म स्ट्रिंग को अक्षुण्ण छोड़ देता है, भले ही इसके अंदर व्हॉट्सएप वर्ण पाए जाते हैं ... मुझे लगता है कि स्ट्रिंग को अनमॉडिफाइड रखना अधिक सहज और पेशेवर है। " निश्चित रूप से कोई भी अंतरिक्ष वर्ण जो अर्थ नहीं जोड़ता है, आउटपुट फाइल को यथासंभव छोटा करना चाहिए? क्या यह मीनिंग ऑफ नहीं है?
— पॉल डी। वेट
3
खैर, मेरी राय में यह एक सामान्य मामले में निश्चित रूप से सही है। लेकिन मैं स्ट्रिंग्स को एक विशेष मामला मानता हूं। यह मूल CSS के डेवलपर के ऊपर है कि अर्थिंग व्हाट्सएप को स्ट्रिंग्स से हटाया जाए या नहीं। मैं जो एल्गोरिथ्म दिखा रहा हूं, वह स्ट्रिंग को अनमॉडिफाइड रखते हुए स्पेसिफिकेशन का अनुसरण करता है।
— केरिदो
4

क्लोजर-स्टाइलशीट ट्राई करें ।

बगल में minification यह भी समर्थन करता है linting , RTL flipping , और वर्ग नाम ।

यह CSS में वैरिएबल , फ़ंक्शंस , कंडीशन और मिक्सिन्स भी जोड़ सकता है ।

यह भी ध्यान दें कि इनमें से कुछ विशेषताएं बाकी क्लोजर टूल्स (जो अपने आप में बहुत शक्तिशाली हैं) पर निर्भर करती हैं।

— आंद्रेज दू
स्रोत
आप इसे विंडोज़ पर कैसे उपयोग करते हैं? मेरे अज्ञान को क्षमा करें
— user2513846
3

यदि आप PHP में कुछ खोज रहे हैं, तो यहाँ लिंक है: -

वसा रहित न्यूनतम

हालाँकि यह PHP Fat-Free फ्रेमवर्क का हिस्सा है, लेकिन इसे स्टैंड-अलोन भी इस्तेमाल किया जा सकता है।

— bcosca
स्रोत
फैट फ्री फ्रेमवर्क GPL है और इस प्रकार मुझे लगता है कि उनके कोड का यह हिस्सा भी है। सिर्फ एक सिर।
— कोडरैज
इसमें कीड़े हैं: बुरा विचार।
— ब्रूनोइस
3

मुझे लगता है कि isnoop का CSS SuperScrub बहुत अच्छा काम करता है। हालांकि यह केवल CSS के लिए सीधे लिंक को ऑनलाइन ही संभाल सकता है: / आप सीएसएस कोड को होल्ड करने के लिए अपनी पसंदीदा पास्टेबिन सेवा का उपयोग करके और बस सुपरस्क्रब को कच्चा लिंक देने के द्वारा प्राप्त कर सकते हैं।

— जॉन मिशेल
स्रोत
मैंने इस पर कोशिश की है #test { padding: 1em; width: 10em; } #test { padding: 2em; }और यह विफल रहा।
— ड्राइडमैन
@ ड्रेडमैन शायद ऐसा इसलिए है क्योंकि यह नहीं जानता कि किसी दिए गए चयनकर्ता के लिए परस्पर विरोधी / डुप्लिकेट मानों का क्या करना है। चूंकि मैं सुपरस्क्रब को बनाए नहीं रखता, इसलिए मैं आपको बता नहीं सकता कि कब या क्या तय किया जाएगा।
— जॉन मिशेल
3

यदि आपकी साइट ASP.NET में है, तो आप अपनी साइट को फ्लाई पर CSS मिनिफिकेशन कर सकते हैं (इसलिए जब भी आप बदलाव करें तो हर बार इसे मैन्युअल रूप से नहीं करना होगा)। इसके साथ उदाहरण के लिए:

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

— Katz
स्रोत
3

दूसरों ने YUI कंप्रेसर का उल्लेख किया है, तो इसका .NET पोर्ट है, और मैं श्रृंखला में एक और लिंक जोड़ूंगा। StyleManager एक सर्वर नियंत्रण है जो YUI कंप्रेसर के .NET पोर्ट को लपेटता है ताकि आप इसे उसी तरह उपयोग कर सकें जैसे आप ScriptManager का उपयोग करने के लिए करते हैं। यह अन्य अच्छी विशेषताओं का एक गुच्छा भी जोड़ता है, जैसे सीएसएस स्थिरांक, टिल्ड (~) रिज़ॉल्यूशन w / आपकी पृष्ठभूमि-छवि परिभाषाओं आदि में। यह तंग है, अच्छी तरह से प्रलेखित है, और मैंने इसे अपने सभी हालिया प्रोजेक्ट w / पर उपयोग किया है ओ एक मुद्दा इसे देखें - gStyleManager.com

— एंड्रयू
स्रोत
3

फिर भी "बीटा में", लेकिन काफी अच्छी तरह से काम करना चाहिए। मैं हर परियोजना में इसके पीछे कोड का उपयोग करता हूं: http://claudiu.phpfogapp.com/ यह PHP में बनाया गया है और आपके * .css फ़ाइल को काफी समय के लिए होस्ट करता है, निश्चित रूप से आपको अपने कोड के साथ अपने कोड का परीक्षण करने के लिए पर्याप्त है। छोटा सीएसएस। (यदि सर्वर पर भीड़ हो जाती है तो मैं केवल पुरानी सीएसएस फ़ाइलों को हटा दूंगा)।

— Claudiu
स्रोत
2

एक कोडप्लेक्स प्रोजेक्ट है जो कि .net वेबसाइटों में प्लग इन करेगा जो CSS और JS फाइलों को छोटा और संक्षिप्त करेगा। Microsoft AJAX मिनिफायर और YUI कंप्रेसर के बीच एक तुलना है जो YUI को थोड़ा बेहतर तरीके से दिखाती है। एक अतिरिक्त भिन्नता है जो Microsoft मिनिफायर और संपीड़न को जोड़ती है जो फ़ाइल को बहुत अधिक सिकोड़ती है।

वैसे भी कड़ी है http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )

— जोनाथन स्टैंटन
स्रोत
2

यह मैंने MVC3 के लिए कैसे किया: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html इस दृष्टिकोण की सुंदरता यह है कि यह मक्खी पर यह सब करता है और आपको फ़ाइलों को पूर्व-संसाधित करने या पोस्ट-बिल्ड को कॉन्फ़िगर करने की आवश्यकता नहीं है।

— m_kramar
स्रोत
2

एक ऑनलाइन टूल (www.csscompressor.net की तुलना में बेहतर है जो मेरे सीएसएस को बढ़ाता है): http://www.cssdrive.com/compressor/compress.php एक उत्कृष्ट कार्य करता है।

— बीटी
स्रोत
बग है। विशिष्ट स्थितियों में यह पूरी तरह से अच्छा js कोड तोड़ता है
— brunoais
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 आपके लिए एक अच्छा ऑनलाइन टूल होगा, यह एक क्लिक में आपके सीएसएस को छोटा कर देगा

— तामिक सोजिएव
स्रोत
ज़रूर, हालाँकि मुझे नहीं लगता कि कई मिनिफ़ायर हैं जिन्हें शुरू करने के लिए एक से अधिक क्लिक की आवश्यकता होती है।
— पॉल डी। वेट
आप पॉल :) को सही करते हैं, लेकिन यह एक बहुत कुछ करता है, तो बस
— संक्षिप्त
1

पॉल आयरिश द्वारा नवीनतम HTML5BoilerPlate पर एक नज़र डालें - इसमें आपकी सभी परिसंपत्तियों (पीएनजी और जेपीजी सहित) को छोटा करने के लिए एक बिल्ड स्क्रिप्ट शामिल है। आप यहां एक डेमो वीडियो देख सकते हैं ।

— बेन ह्यूजेस
स्रोत
2
ज़रूर; इसका CSS मिनिफायर YUI कंप्रेसर है।
— पॉल डी। वेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.