विजुअल स्टूडियो कोड में कार्य स्वचालित करने के लिए कैसे

ग्रंट या गल्प जैसे बिल्ड टूल का उपयोग करके आप विकास के बहुत से समय को बचा सकते हैं कुछ दोहराव को स्वचालित करना “कार्य”. यदि आप अपने जाने वाले कोड संपादक के रूप में विज़ुअल स्टूडियो कोड चुनते हैं, तो आपका वर्कफ़्लो और भी सुव्यवस्थित हो सकता है और अंततः, अधिक उत्पादक हो सकता है.

इसके मूल में Node.js के साथ निर्मित, विजुअल स्टूडियो कोड आपको अनुमति देता है संपादक विंडो को छोड़े बिना कार्यों को चलाएं. और हम आपको इस पोस्ट में ऐसा करने का तरीका बताएंगे.

शुरू करते हैं.

पूर्व आवश्यक वस्तुएँ

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

मैं यह भी मानूंगा कि आपके प्रोजेक्ट में फाइलें और निर्देशिकाएं अपने उचित स्थान पर हैं, जिनमें शामिल हैं config फ़ाइल, जैसे कि gulpfile.js या Gruntfile.js अगर आप इसके बजाय ग्रंट का उपयोग करते हैं। और परियोजना निर्भरता में पंजीकृत package.json इस बिंदु पर भी स्थापित किया जाना चाहिए.

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

. ├── css ├── ├── sass p gulpfile.js ss index.html s js │ │ src _ node_modules। Package.json

हम अपनी परियोजना में हमारे निर्माण उपकरण के रूप में गुल्प का उपयोग करते हैं। हमारे पास कई कार्य पंजीकृत हैं gulpfile.js निम्नलिखित नुसार:

 var gulp = आवश्यकता ('gulp'); var uglify = आवश्यकता ('gulp-uglify'); var sass = आवश्यकता ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('स्क्रिप्ट्स', फंक्शन () रिटर्न gulp.src (jsSrc .pipe (uglify ()) .pipe (gulp.dest ('./js')))। gulp.task ('स्टाइल'), फंक्शन () रिटर्न gulp.src (sassSrc) .pipe (sass (outputStyle: 'compress')) .pipe (gulp.dest ('./css'));)। ; gulp.task ('स्वचालित', फंक्शन () gulp.watch ([sassSrc, jsSrc], ['स्क्रिप्ट', 'स्टाइल'];); gulp.task ('डिफ़ॉल्ट', ['स्क्रिप्ट', 'शैलियाँ', 'स्वचालित']];

हमारे द्वारा निर्दिष्ट चार कार्य हैं:

स्क्रिप्ट: वह कार्य जो हमारी जावास्क्रिप्ट फ़ाइलों के साथ-साथ minifiy आउटपुट को भी घसीट UglifyJS प्लगइन के माध्यम से संकलित करेगा.
शैलियों: कार्य जो हमारी SCSS फ़ाइलों को CSS में संकलित करेगा और साथ ही आउटपुट को संपीड़ित करेगा.
को स्वचालित: कार्य जो स्वचालित होगा शैलियों तथा स्क्रिप्ट कार्य हालांकि बिल्ट-इन घड़ी उपयोगिता.
चूक: वह कार्य जो एक साथ सभी तीन कामों को एक साथ चलाएगा.

जैसा कि हमारी परियोजना में निर्मित उपकरण सभी तैयार हैं, अब हम उन कार्यों को स्वचालित करने के लिए भी जा सकते हैं जिन्हें हमने भीतर परिभाषित किया है gulpfile.js.

हालाँकि, यदि आप बताए गए किसी भी उपकरण के साथ काम नहीं कर रहे हैं, तो मैं आपको आगे बढ़ने से पहले इस विषय पर विचार करने के लिए हमारी पिछली कुछ पोस्टों पर गौर करने की सलाह देता हूं।.

कैसे अपने वर्कफ़्लो को स्वचालित करने के लिए ग्रन्ट का उपयोग करें
गुलपजे से आरंभ करना
बिल्ड लिपियों की लड़ाई: गल्प बनाम ग्रंट

रन और स्वचालित कार्य

चल रहा है और स्वचालित है “कार्य” दृश्य स्टूडियो कोड में काफी सीधा है। सबसे पहले, लॉन्च करें कमान पैलेट Shift + Cmd + P कुंजी संयोजन दबाकर या मेनू बार के माध्यम से, दृश्य> कमांड पैलेट यदि वह आपके लिए अधिक सुविधाजनक है। फिर, टाइप करें कार्य, और चुनें “कार्य: कार्य चलाएँ” परिणाम में दिखाए गए कुछ विकल्पों की संख्या से.

विजुअल स्टूडियो कोड स्मार्ट है; यह जानता है कि हम गुल्प का उपयोग कर रहे हैं, उठाओ gulpfile.js, और उन टास्क की सूची को प्रकट करें जिन्हें हमने फाइल में परिभाषित किया है.

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

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

गहन अंतःकरण

इसके अलावा, हम अपने वर्कफ़्लो को कारगर बनाने के लिए अपने प्रोजेक्ट को विज़ुअल स्टूडियो कोड में एकीकृत कर सकते हैं। और विजुअल स्टूडियो कोड में हमारे कार्य को एकीकृत करना आसान और त्वरित है.

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

विजुअल स्टूडियो कोड को अब एक नई फाइल बनानी चाहिए थी जिसका नाम है tasks.json के अंतर्गत .vscode आपकी परियोजना निर्देशिका में. tasks.json, इस बिंदु पर, नंगे विन्यास शामिल हैं.

और जैसा कि आप नीचे देख सकते हैं, कार्य वर्तमान में संपत्ति केवल एक खाली सरणी है.

"संस्करण": "0.1.0", "कमांड": "गल्प", "isShellCommand": सच, "आर्ग्स": ["--नो-रंग"], "कार्य": []

विस्तार कार्य मूल्य निम्नानुसार है.

"संस्करण": "0.1.0", "कमांड": "गल्प", "isShellCommand": सच, "आर्ग्स": ["--नो-रंग"], "कार्य": ["taskName" " डिफ़ॉल्ट "," ब्यूइल्डकम ": सच्चा,]

कार्य का नाम हमारे में कार्य का नाम निर्दिष्ट करता है gulpfile.js कि हम दौड़ना चाहेंगे। isBuildCommand संपत्ति परिभाषित करता है चूक कमांड के रूप में “निर्माण” आदेश। अब, कमांड पैलेट के चारों ओर जाने के बजाय, आप बस कुंजी संयोजन Shift + Cmd + B दबा सकते हैं.

वैकल्पिक रूप से आप इसका चयन कर सकते हैं “रन बनाएँ कार्य” कमांड पैलेट में कार्य खोज परिणाम.

समेट रहा हु

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

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

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

विजुअल स्टूडियो कोड: 5 विस्मयकारी विशेषताएं जो इसे एक फ्रंटरनर बनाती हैं
विज़ुअल स्टूडियो कोड कैसे कस्टमाइज़ करें
फ्रंट-एंड डेवलपर्स के लिए 8 शक्तिशाली विजुअल स्टूडियो कोड एक्सटेंशन
विजुअल स्टूडियो कोड: कुंजी बंधन प्रबंधन के माध्यम से उत्पादकता बढ़ाना
विजुअल स्टूडियो कोड में Microsoft समावेशी डिज़ाइन का प्रभाव