मुफ़्त CSS मिनिफायर और ब्यूटीफायर

यह कैसे काम करता है

यह टूल एक हाथ से लिखा, ज़ीरो-डिपेंडेंसी CSS टोकनाइज़र उपयोग करता है जो पूरी तरह JavaScript में बनाया गया है — कोई बाहरी लाइब्रेरी नहीं, कोई सर्वर कॉल नहीं। टोकनाइज़र किसी भी बदलाव को लागू करने से पहले हर कैरेक्टर को कोड, कमेंट, कोट की स्ट्रिंग, या url() वैल्यू के रूप में वर्गीकृत करता है, जो व्हाइटस्पेस नियमों को स्ट्रिंग कंटेंट, data URI, या calc() एक्सप्रेशन को ख़राब करने से रोकता है।

1. 1
   टोकनाइज़ेशन पास

   इनपुट CSS कैरेक्टर-दर-कैरेक्टर स्कैन किया जाता है और टाइप किए टोकन में विभाजित किया जाता है: रॉ कोड सेगमेंट, /* ... */ कमेंट्स, कोट की स्ट्रिंग (एस्केप सीक्वेंस को बनाए रखते हुए), और url(...) ब्लॉक। यह सुनिश्चित करता है कि अगले चरण के बदलाव केवल असली CSS सिंटैक्स को छूएँ — कभी एक स्ट्रिंग लिटरल या data URI के कंटेंट को नहीं।
2. 2
   मिनिफ़िकेशन या ब्यूटिफ़िकेशन

   Minify मोड में, सामान्य कमेंट्स हटा दिए जाते हैं (/*! license */ कमेंट्स रखे जाते हैं), कोड टोकनों में व्हाइटस्पेस के रन सिंगल स्पेस में समेट दिए जाते हैं, और { } : ; , > ~ के आसपास का व्हाइटस्पेस हटाया जाता है। + और - के आसपास के स्पेस जानबूझकर छोड़ दिए जाते हैं ताकि calc() एक्सप्रेशन न टूटें। Beautify मोड में, कोड पहले एक साफ़ बेसलाइन तक मिनिफ़ाई किया जाता है, फिर a:hover जैसे सिलेक्टर कोलन से property: value कोलन को अलग पहचानने के लिए दो-स्पेस डेप्थ ट्रैकिंग और डिक्लेरेशन-कोलन डिटेक्शन के साथ फिर से टोकनाइज़ और फिर से इंडेंट किया जाता है।
3. 3
   Gzip साइज़ अनुमान

   आउटपुट बनाने के बाद, ब्राउज़र का नेटिव CompressionStream API परिणाम को gzip से कंप्रेस करने और परिणामी बाइट काउंट मापने के लिए उपयोग किया जाता है। यह एक वास्तविक ट्रांसफ़र-साइज़ अनुमान देता है जो gzip कंप्रेशन वाला एक वेब सर्वर नेटवर्क पर जो भेजता उससे मेल खाता है।
4. 4
   कॉपी या डाउनलोड

   प्रोसेस किया गया CSS Clipboard API के ज़रिए क्लिपबोर्ड में लिखा जाता है, या text/css MIME टाइप वाले एक Blob का उपयोग करके styles.min.css (minify मोड) या styles.css (beautify मोड) के रूप में डाउनलोड किया जाता है। टाइप करते ही साइज़ कमी प्रतिशत लाइव दिखाया जाता है।

संबंधित टूल