ग्रंट जेएस को सिम्फनी में एकीकृत करें और एसेटिक को बदलें

मैं जानता था ग्रंट जे एस बिना इसका इस्तेमाल किए लेकिन मुझे एक डेवलपर से सुनना पड़ा होगा Symfony मुझे द्रव्यमान दें ताकि मैं इस समाधान को देखूं। सबसे पहले, बदलें एसेटिक द्वारा ग्रंट जे एस मेरे लिए मेरी परियोजनाओं को काम करने का एक समाधान था Symfony साथ HHVM. अब सर्वर पीएचपी de फेसबुक साथ बखूबी काम करता है एसेटिक लेकिन मुझे उपयोग जारी रखने के कम और कम कारण मिलते हैं एसेटिक. अंत में, का उपयोग असंतोष का शब्द, एक प्लगइन पर आधारित है नोड जेएस, अधिकांश डेवलपर्स को उपयोग करने के लिए प्रेरित करता है कुंज, निर्भरताओं के प्रबंधन के लिए एक और प्लगइन। हम इसके बारे में बात करेंगे कुंज निचला। आइए पेशेवरों और विपक्षों पर एक त्वरित नज़र डालें।

ध्यान ! इससे पहले कि आप अपना आवेदन माइग्रेट करना शुरू करें, मैं आपको सलाह देता हूं कि आप अपने कोड का संस्करण बनाएं और कुछ परीक्षण करें। इस दीर्घकालिक मिशन को शुरू करने से पहले पूरे लेख को पढ़ने की पुरजोर सलाह दी जाती है।

परिचय

आस्तिक, गलत समझा दोस्त

मेरे हिस्से के लिए, मैं उस पर विचार करता हूंएसेटिक गलत समझा जाता है और दुरुपयोग किया जाता है। मैं आपको अपने विचार समझाऊंगा। (इसके अलावा, मैंने अपनी ओर से एक गलतफहमी के बाद इस लेख को सही किया, उनकी प्रतिक्रिया के लिए मैनुअल क्लेन का धन्यवाद)।

लाभ

का उपयोगएसेटिक आपको संसाधनों पर कैश को रद्द करने की अनुमति देता है क्योंकि हर बार जब आप कमांड लॉन्च करते हैं तो उत्पन्न जेएस और सीएसएस संसाधनों का नाम बदल जाता है "एसेटिक: डंप”. एक निश्चित लाभ!

नुकसान

• संसाधन कैसे उत्पन्न होते हैं, इसे कॉन्फ़िगर करने के लिए एसेटिक कुछ विकल्प प्रदान करता है।
• कम जैसे विदेशी संसाधन उत्पन्न करने के लिए PHP बंडलों को स्थापित करना आवश्यक है। PHP कोड में स्थापित है विक्रेताओं जबकि यह कार्य केवल क्लाइंट के लिए उपयोगी है। सर्वर के लिए नहीं। इसके अलावा, यह आपके प्रोजेक्ट की संख्या बढ़ाता है।
• कोड पीएचपी में आवश्यक है टेम्पलेट्स टहनी utilisant एसेटिक या उनमें से लगभग सभी। जबकि ग्रंट के साथ, संकलित संसाधन को आपके द्वारा दिए गए नाम से पुकारा जाएगा।

वास्तव में अपने टेम्प्लेट में एसेटिक का उपयोग करें

में अक्सर देखता हूँ टेम्पलेट्स टहनी कि मैं कभी-कभी जुड़े संसाधनों के माध्यम से आता हूं एसेटिक, कभी-कभी के माध्यम से आस्तियों de सिम्फनी।

1 2 3 4 5

# एसेटिक का उपयोग करना @NamespaceMyBundle/Resources/public/css/main.css # अप्रयुक्त संपत्ति, संपत्ति का उपयोग करना /बंडल/नेमस्पेसमी/सीएसएस/मेन.सीएसएस

पहले मामले में, एसेटिक वास्तव में लागू होता है। दूसरे मामले में, एसेटिक पूरी तरह से छुपा हुआ है ताकि इसका उपयोग न किया जा सके आस्तियों de Symfony. का उपयोग आस्तियों मेरी राय में भी एक गलती है, कम से कम जेएस और सीएसएस संसाधनों तक पहुंच के लिए। कोष्ठक का अंत...

ग्रंट जेएस द सू फ्लेक्सिबल कंपाइलर!

ग्रंट जे एस पर आधारित Node.js. यह एक क्लाइंट-साइड टूल है जो मॉड्यूल का उपयोग कई कार्यों को करने के लिए करता है जैसे फाइल कॉन्टेनेशन, minification, छवि संपीड़न, कम का संकलन, टाइपस्क्रिप्ट ... विपरीत एसेटिक, आपको कुछ कॉन्फ़िगरेशन सेट अप करने होंगे लेकिन निश्चिंत रहें, यह प्रारंभिक निवेश भुगतान करेगा और अंत में इससे कहीं अधिक तेज़ होगाएसेटिक.

बोवर का परिचय, संसाधनों का कंपोजर.जॉन

ग्रंट जे एस अच्छा है और उसी सेगमेंट पर रखा जाना आता हैएसेटिक. लेकिन जब तक आप इस्तेमाल करते हैं Node.js, साथ ही उपयोग करें कुंज ! यह एक निर्भरता प्रबंधक है। इसे सीधे शब्दों में कहें, तो आप उन संसाधनों को परिभाषित करते हैं जिनकी आपको आवश्यकता है, "ऐसे संस्करण में ऐसी लाइब्रेरी" और कुंज आपके इच्छित संस्करण को प्राप्त करने का ख्याल रखता है। बेशक, जैसे composer.json के लिए पीएचपी, आप संस्करण श्रेणियां जोड़ सकते हैं। यदि आप संस्करण 3.3 में पुस्तकालय चाहते हैं।, * कुंज आपको नवीनतम संस्करण उपलब्ध कराएगा। इन संसाधनों को आसानी से अपडेट करने का समाधान। हमारी मानक परियोजनाओं पर एक आवर्ती समस्या क्योंकि हमारे पास एक संस्करण डाउनलोड करने की प्रवृत्ति है (था!) और इसे बाद में कभी भी अपडेट न करें। हमारे पास मामूली अपडेट नहीं थे जो कभी-कभी इतने उपयोगी होते हैं।

तकनीकी रूप से, कुंज बोवर.जेसन फ़ाइल का उपयोग करता है। इसका वाक्य-विन्यास अत्यंत सरल है। मैं आपसे इसका उपयोग करने का आग्रह करता हूं, भले ही आप इसके बिना चल सकें। फ़ाइल को संसाधनों के विपरीत संस्करणित करने की आवश्यकता होगी कुंज आपके लिए डाउनलोड आ जाएगा। आरंभ करने के लिए, मैं आपको नीचे एक उदाहरण दूंगा।

वर्जनिंग संकलित संसाधन

मेरे हिस्से के लिए, मुझे अपने संकलित संसाधनों का संस्करण नहीं बनाने की आदत हो गई थी एसेटिक लेकिन मैंने इसके विपरीत करने का फैसला किया ग्रंट जे एस. चूंकि मैं संसाधनों के प्रबंधन के बिना करता हूं कुंज (परिचय देखें कुंज), मैं अपने संसाधनों को संकलित करूंगा और गटर. इस तरह, मैं जल्दी से अपना आवेदन तैनात कर सकता हूं। मुझे इस अभ्यास पर कभी प्रतिक्रिया नहीं मिली लेकिन यह मेरे लिए सम्मानजनक लगता है क्योंकि तैनाती के समय दो ऑपरेशन रद्द कर दिए जाते हैं (संसाधनों की वसूली के साथ कुंज और साथ संकलित करें ग्रंट जे एस), साथ ही साथ होने की आवश्यकता है Node.js उसकी मशीन पर।

हमारे सिम्फनी प्रोजेक्ट से एसेटिक को हटा दें

एसेटिक संसाधनों को संकलित करने के लिए जिम्मेदार डिफ़ॉल्ट घटक के रूप में चुना गया था। ज्ञात हो कि सब कुछ के बावजूद इसे हटाना बहुत आसान है।

ब्लॉक हटाएं टहनी टाइप जावास्क्रिप्ट et शैली पत्रक. वे आवश्यक नहीं हैं। जिन फ़ाइलों का आप उपयोग कर रहे थे उन्हें अलग रखें। भविष्य में, आप जिन फ़ाइलों का उपयोग करना चाहते हैं, उन्हें फ़ाइल में परिभाषित किया जाएगा ग्रंटफाइल.जेएस. हम इसे थोड़ी देर बाद देखेंगे।

1 2 3 4 5 6 7 8

#app/config/config.yml # एसेटिक से कॉन्फ़िगरेशन हटाएं। कुछ config_prod.yml, config_dev.yml और अन्य अपलोड की गई फ़ाइलों में भी होंगे संपत्ति: डिबग: "% कर्नेल.डीबग%" use_controller: असत्य बंडल: [] फिल्टर: सीएसएस पुनर्लेखन: ~

1 2 3 4 5

#app/AppKernel.php # AppKernel से लाइन हटाकर AsticBundle लोड करना बंद करें ... नई SymfonyBundleAsseticBundleAsseticBundle() ...

1 2 3 4 5

# संगीतकार.जेसन # एसेटिक बंडल निकालें ... "सिम्फोनी/एसेटिक-बंडल": "~2.3" ...

ये रहा, आपने निष्क्रिय कर दिया है एसेटिक विश्व स्तर पर। इस तरह, अब कमांड खोजने की उम्मीद नहीं है एसेटिक: डंप et एसेटिक: घड़ी.

हमारे प्रोजेक्ट में ग्रंट जेएस कैसे काम करेगा?

हमें अपनी परियोजना को तीन फाइलों के साथ कॉन्फ़िगर करना होगा:

• package.json जो हमें प्लगइन्स इंस्टॉल करने की अनुमति देगा Node.js (ग्रंट जे एस और उनके योगदान);
• बोवर.जॉन हमारे संसाधनों को संकलित करने के क्रम में हल की जाने वाली निर्भरताओं पर रिपोर्ट करने के लिए;
• ग्रंटफाइल.जेएस जिस पर आप सबसे ज्यादा काम कर रहे होंगे। इसमें आपके सभी प्रोजेक्ट या भाग को संकलित करने के लिए सभी संभव और/या किए जाने वाले कार्य शामिल होंगे।

पैकेज.जॉन ग्रंट जेएस को स्थापित करने के लिए

1 2 3 4 5 6 7 8 9 10 11

{ "निर्भरता"{ "असंतोष का शब्द": "^ 0.4.5", "ग्रंट-योगदान-कम": "~0.11.0", "घुरघुराना-योगदान-बदसूरत": "^ 0.6.0", "लोड-ग्रंट-कार्य": "^ 0.6.0" }, "निर्भरता"{ "असंतोष का शब्द": "^ 0.4.5" } }

पहले इस सामग्री का उपयोग करें। इसकी स्थापना की आवश्यकता है ग्रंट जे एस और योगदान, जिनमें से दो (घुरघुराना-योगदान-कम et घुरघुराना-योगदान-बदसूरत) आपको अपनी जावास्क्रिप्ट फाइलों और फाइलों को संकलित करने की अनुमति देगा कम.

मेरी निर्भरताओं को हल करने के लिए बोवर.जॉन (बूटस्ट्रैप, फ़ॉन्ट-भयानक, ...)

1 2 3 4 5 6 7 8 9 10 11 12

{ "अनदेखा करना"[ "**/.*", "नोड_मॉड्यूल", "बोवर_कंपोनेंट्स", " परीक्षा ", "परिक्षण" ], "निर्भरता"{ "बूटस्ट्रैप": "3.3। *" } }

यहाँ एक न्यूनतम फ़ाइल है। मेरे मामले में, मैंने अनुरोध किया कि 3.3 शाखा का नवीनतम संस्करण जूते का फीता डाउनलोड किया जाए। डिफ़ॉल्ट रूप से, जब आप a बोवर स्थापित करें आपकी निर्भरताओं को फ़ोल्डर में स्थापित किया जाएगा बोवर_घटक. इसके उपयोग से .Bowerrc आप गंतव्य फ़ोल्डर बदल सकते हैं। आप बोवर की वेबसाइट पर अधिक जानकारी प्राप्त कर सकते हैं।

1 2	# बोवर का उपयोग करके निर्भरताएँ स्थापित करें $ बोवर स्थापित करें

Gruntfile.js - यह सब कहाँ से शुरू होता है

वे सभी आदेश और कार्य जिन्हें आप फ़ाइल में उस तथ्य को जोड़ना चाहेंगे ग्रंटफाइल.जेएस. अन्य बातों के अलावा, आप फ़ाइलें संकलित कर सकते हैं ssss et सास, किसी भी प्रकार की फाइलों को जोड़ना, संकलित करना टाइपप्रति, छोटा करना जावास्क्रिप्ट फाइलें, चित्र और साथ ही HTML फाइलें। आप छवियों का आकार भी बदल सकते हैं और फ़ाइलें कॉपी कर सकते हैं (जैसे फोंट)।

आज मैं आपको केवल यह दिखाने जा रहा हूँ कि फ़ाइलों को कैसे संकलित किया जाता है ।कम और फाइलों को छोटा करें . जे एस. क्रियाएं जो मैं हर दिन करता हूं और जो आज मुझे इस या उस हिस्से का आसानी से उपयोग करने की अनुमति देता है बूटस्ट्रैप. सभी का उपयोग करने के बजाय बूटस्ट्रैप जब आपको बस इतना ही चाहिए ग्लिफ़कॉन्स, कस्टम लाइब्रेरी पर काम करना दिलचस्प हो सकता है।

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

मॉड्यूलनिर्यात = समारोह (घुरघुराना) { की आवश्यकता होती है('लोड-ग्रंट-कार्य')(असंतोष का शब्द); घुरघुराना.initConfig({ कम{ जिले{ विकल्पों{ सेक: <strong>उद्देश्य</strong>, yuicompress: <strong>उद्देश्य</strong>, इष्टतमीकरण: 2 }, फ़ाइलों{ "वेब/सीएसएस/मेन.सीएसएस"[ "Bower_components/bootsrap/dist/css/bootstrap.css", "src/Namespace/MyBundle/Resources/public/css/main.less" ] } } }, कुरूप कर देना{ विकल्पों{ वध करना: असत्य, sourceMap: <strong>उद्देश्य</strong> }, जिले{ फ़ाइलों{ 'वेब/जेएस/main.js'[ 'src/Namespace/MyBundle/Resources/public/js/main.js', ] } } } }); घुरघुराना. रजिस्टर कार्य ('गलती करना'["कम", "बदसूरत"]); };

यहाँ एक पूरी तरह से काम करने वाली फ़ाइल है। मैं इसे थोड़े से प्रोजेक्ट पर भी इस्तेमाल करता हूं ढांचा क्योंकि यह एक है एपीआई (API) . एसेटिक मेरे मामले में काफी बेकार था। इसलिए मैंने इसके बिना सर्वर के बाहर एक उपकरण का उपयोग करना और तैनाती के समय पूरी तरह से निर्मित संसाधनों को वितरित करना पसंद किया।

आइए Gruntfile.js के कार्यों का वर्णन करें

पिछली फ़ाइल में, मैं के दो योगदानों को कॉन्फ़िगर करता हूं ग्रंट जे एस (_कम _और कुरूप कर देना) कि मैंने अपने लिए धन्यवाद स्थापित किया package.json. आप देखेंगे कि प्लगइन्स एक दूसरे से आसानी से अलग हैं। विस्तार का मामला लें कम.

प्रत्येक योगदान असंतोष का शब्द आप जिसका उपयोग करने जा रहे हैं, उसे योगदान के लिए परिभाषित कीवर्ड के माध्यम से घोषित किया जाना चाहिए। उदाहरण के लिए घुरघुराना-योगदान-कम कुंजी शब्द है कम. इस भाग के तहत, हम परिभाषित कर सकते हैं लक्ष्य. अवधि के तहत लक्ष्य समझना उपभाग. एक ठोस मामले में, हम परिभाषित कर सकते हैं लक्ष्य बूटस्ट्रैप स्रोत से उसी नाम के पुस्तकालय को संकलित करने के लिए कम. हम दूसरे सेट को परिभाषित कर सकते हैं जिले हमारी परियोजना के स्रोतों को संकलित करने के लिए। कई उपसमुच्चयों का उपयोग एक आवश्यकता नहीं है, लेकिन जब आप इसका उपयोग करेंगे तो आपके पास बाद में उनका उपयोग करने का अवसर होगा योगदान घड़ी समय बचाने के लिए।

फिर उसी एक्सटेंशन के सबसेट की संरचना आईएसओ है। कॉन्ट्रारियो में, प्रत्येक योगदान की संरचना भिन्न होती है। मानक योगदान अक्सर कई उदाहरणों के साथ प्रस्तुत किए जाते हैं। आधिकारिक प्लगइन्स GitHub रिपॉजिटरी पर उपलब्ध हैं।

आइए अपने उदाहरण और हमारी फाइलों के संकलन के विन्यास पर वापस जाएं ।कम. खेल में फ़ाइलों हम अंतिम फाइलों का नाम एक कुंजी के रूप में जोड़ते हैं, और एक मान के रूप में, संकलित करने के लिए इनपुट फ़ाइलों की एक सरणी। मुझे लगता है कि अधिक विवरण देना आवश्यक नहीं है क्योंकि वाक्य रचना काफी सहज है।

योगदान कुरूप कर देना जावास्क्रिप्ट फ़ाइलों के संयोजन, न्यूनीकरण और संपीड़न के लिए उपयोग किया जाता है, उसी संरचना का उपयोग करता है। इस मामले में, इसके दो योगदानों का उपयोग करना काफी सरल है।

संकलन करने की कला

और अब कॉम्पiloएनएस हमारे स्रोत। साथ एसेटिक, हम यह आदेश चलाते हैं:

1	php ऐप/कंसोल एसेटिक: डंप

अब हमने हटा दिया है एसेटिकबंडल। हमारे पास अब यह आदेश नहीं है। तो हम अपने प्लगइन को चलाने जा रहे हैं आसंधि.

1

घुरघुराना

आप देखते हैं कि यह अभी भी बहुत जटिल नहीं है... इस मामले में, जो कार्य निष्पादित किए जाएंगे वे प्रोफ़ाइल के लिए दिए गए कार्य होंगे चूक। इसे अंतिम पंक्ति में परिभाषित किया गया था।

1	घुरघुराना. रजिस्टर कार्य ('गलती करना'["कम", "बदसूरत"]);

आपने बहुत अच्छी तरह से एक प्रोफ़ाइल परिभाषित की होगी जावास्क्रिप्ट जिसने निष्पादित नहीं किया होगा कुरूप कर देना.

1	घुरघुराना. रजिस्टर कार्य ('जावास्क्रिप्ट'['बदसूरत']);

मामले में आप कमांड चला सकते थे असंतोष का शब्द प्रोफाइल नाम के बाद।

1	ग्रंट जावास्क्रिप्ट

आप जितने चाहें उतने प्रोफाइल परिभाषित कर सकते हैं। मेरे प्रोफाइल के मामले में जावास्क्रिप्ट, ब्याज कम है क्योंकि आप निम्न कॉल भी कर सकते थे।

1	घुरघुराना कुरूप

निष्कर्ष

अब आप जानते हैं कि अपने संसाधनों को कैसे संकलित करना है। यदि आपने सभी सूक्ष्मताओं को नहीं समझा है, तो आपको शीघ्र ही इसके द्वारा प्रदान किए गए सभी लचीलेपन की सराहना करने में सक्षम होना चाहिए असंतोष का शब्द इसके संबंध मेंएसेटिक. क्या अधिक है, जावास्क्रिप्ट और सीएसएस जैसे मानक संसाधनों के अलावा, आप फोंट, छवियों को भी संसाधित कर सकते हैं ... एक संपत्ति जिसने मुझे तुरंत जीत लिया।

का वास्तविक लाभ असंतोष का शब्द इसका लचीलापन इसका उपयोग है। असंतोष का शब्द et कुंज उनके बीच एसेटिक के विकल्प का प्रतीक है। बिना कुंज आप अभी भी साथ काम कर सकते हैं असंतोष का शब्द लेकिन अनुभव समग्र नहीं होगा।

मुझे आशा है कि यह लेख आपको इसके उपयोग को आसानी से समझने में मदद करेगा असंतोष का शब्द. बहादुर बनो, तुम करीब आ ही गए हो!