👉🏼 🛑 🎯 शराबी: सीएसएस / जावास्क्रिप्ट न्यूनतम के लिए वैचारिक चैंपियन 🈶 👨🏻‍⚕️ 🙆🏿

इतना समय पहले नहीं हैबेरा में सीएसएस / जावास्क्रिप्ट फ़ाइल कॉम्बिनेटर के बारे में एक लेख पहले से ही था: स्मार्टी के लिए प्लगइन - गठबंधन । यह एक उपयोगी चीज है, क्योंकि यह आपको पेज लोडिंग में तेजी लाने और सर्वर पर लोड कम करने की अनुमति देता है। फिर अपने कॉम्बिनेटर + मिनिमाइज़र को बनाने के लिए विचार आया, जिसका उपयोग केवल स्मार्टी प्रोजेक्ट्स में ही नहीं किया जा सकता है, बल्कि सामान्य तौर पर किसी में भी किया जा सकता है। विचार एक शराबी में बदल गया। इसे निम्नलिखित आवश्यकताओं को पूरा करना चाहिए:

किसी भी तैयार की गई परियोजना में सरल और त्वरित एकीकरण, बाद वाले में न्यूनतम परिवर्तन के साथ
न्यूनतम कोड आकार और फ़ाइलों की संख्या
प्रौद्योगिकी और ढांचे से बहुमुखी प्रतिभा और स्वतंत्रता - किसी भी होस्टिंग पर काम करने के लिए, यहां तक कि सबसे सीमित भी

प्रारंभ में, कार्य सीएस-कार्ट पर आधारित एक परियोजना के सीएसएस / जावास्क्रिप्ट लोडिंग का अनुकूलन करना था (यह स्मार्टी का उपयोग भी करता है)। परियोजना ने लगातार 17 सीएसएस फाइलें लोड कीं, और 15 जावास्क्रिप्ट, जो निश्चित रूप से बेकार है। इनमें से लगभग आधा सीएस-कार्ट इंजन पर ही गिर गया, और दूसरा ऐड-ऑन स्थापित किया गया। हमें एक समाधान की आवश्यकता थी जो हमें CSS / Javascript को संयोजित करने और मूल प्रोजेक्ट फ़ाइलों में न्यूनतम परिवर्तन के साथ करने की अनुमति देगा। Addons खुद अपने CSS और Javascript को लोड करते हैं। मैं स्वयं ऐड-ऑन के तर्क में नहीं आना चाहता था, इसलिए बेंडर आपको सीएसएस / जावास्क्रिप्ट से एक कतार बनाने की अनुमति देता है, उसी तरह जैसे वर्डप्रेस।

शराबी अद्वितीय या सुविधा- संपन्न होने का ढोंग नहीं करता। यहां एक और कार्य है: न्यूनतमता (पैकर्स के साथ यह केवल 3 फाइलें हैं), और मौजूदा परियोजना से कनेक्शन में आसानी।

इसका उपयोग कैसे करें?

एक उदाहरण के रूप में, कोड का एक टुकड़ा लें जिसमें CSS और जावास्क्रिप्ट शामिल हैं, ~~एक पंक्ति में चार,~~ प्रत्येक में दो:

<html lang="en"> <head> <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </head> <body> ... </body> </html>

अब Bender जोड़ें:

 <html lang="en"> <head> <?php require_once "Bender/Bender.class.php"; $bender = new Bender(); //      CSS  JS $bender->enqueue("assets/css/bootstrap.css"); $bender->enqueue("assets/css/bootstrap-theme.css"); $bender->enqueue("assets/js/jquery-1.10.2.js"); $bender->enqueue("assets/js/bootstrap.js"); //   ,        : $bender->enqueue(array("assets/css/bootstrap.css", "assets/css/bootstrap-theme.css", ...)); //     /  CSS <link rel="stylesheet" href="..." />   <head> echo $bender->output("cache/stylesheet.css"); ?> </head> <body> ... <?php //     /  JS <script src="...">  </body> (  ) echo $bender->output("cache/javascript.js"); ?> </body> </html>

Bender का परिणाम निम्नलिखित कोड होगा:

 <html lang="en"> <head> <link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/javascript.js"></script> </body> </html>

यदि परिणामी फाइलें पहले से ही बनाई गई हैं, तो वे अधिलेखित नहीं हैं। इस व्यवहार को ttl प्रॉपर्टी (नीचे देखें) के माध्यम से बदला जा सकता है।

~~मिमिमी~~ आउटपुट में CSS / JS फाइलें कम से कम होती हैं। डिफ़ॉल्ट रूप से, जावास्क्रिप्ट डीन एडवर्ड्स के जावास्क्रिप्टपैकर का उपयोग करता है, और सीएसएस जोएला के सीएसएमएमिन का उपयोग करता है। वे एक बहुत अच्छा परिणाम देते हैं, लेकिन भविष्य में अन्य न्यूनतमियों को जोड़ना संभव होगा। इसके अलावा, आप न्यूनतमकरण को पूरी तरह से अक्षम कर सकते हैं - परिणाम संयुक्त होगा, लेकिन संपीड़ित फाइलें नहीं।

चतुर

बेंडर में स्मार्टी के लिए एक प्लगइन शामिल है। ऐसा करने के लिए, आपको बस Smarty प्लगइन डायरेक्टरी में function.bender.php को रखने की आवश्यकता है, यह याद रखना कि प्रोजेक्ट इनिशियलाइज़ेशन स्क्रिप्ट में कहीं कहीं खुद Bender क्लास को बाहर करना है। एक समझदार टेम्पलेट में शराबी का उपयोग करना:

 <html lang="en"> <head> {bender src="assets/css/bootstrap.css"} {bender src="assets/css/bootstrap-theme.css"} {bender src="assets/js/jquery-1.10.2.js"} {bender src="assets/js/bootstrap.js"} {bender output="cache/stylesheet.css"} </head> <body> ... {bender output="cache/javascript.js"} </body> </html>

गुण

बेंडर में न्यूनतम गुण होते हैं। यहाँ वे हैं:

 $bender->cssmin:    "cssmin"    CssMin,      CSS. $bender->jsmin: "packer"   JavaScriptPacker, "jshrink"  JShrink,       JS. $bender->ttl:    .    3600 ,   ,    . 0 -  , -1 -   .

योजनाओं में

Twig और Wordpress के लिए प्लगइन्स
एन्क्यू और आउटपुट के लिए पैरामीटर जोड़ें
$ देव संपत्ति - डिबग मोड के लिए - संयोजन के बिना, "जैसा है" फाइलें देगा

Download GitHub से बेंडर | अंग्रेजी उपयोग के निर्देश

मुझे टिप्पणियों में सुधार, प्रतिक्रिया और यहां तक कि आलोचना के लिए सुझाव देने में खुशी होगी। मुझे लगता है कि आपने अनुमान लगाया था कि नाम बेंडर का फ्यूचरामा से कोई लेना-देना नहीं है - यह शब्द "कॉम्बिनेटर" से आया है।

शराबी: सीएसएस / जावास्क्रिप्ट न्यूनतम के लिए वैचारिक चैंपियन

इसका उपयोग कैसे करें?

चतुर

गुण

योजनाओं में

More articles: