गुलपजे से आरंभ करना

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

इस लेख में हम मूल उपयोग के मूल वाक्य-विन्यास और कुछ उदाहरणों से - गुल्प के उपयोग की मूल बातें देखेंगे। लेख के अंत तक आपको सक्षम होना चाहिए उन पैकेजों को ढूंढें, इंस्टॉल करें और उपयोग करें जो दूसरों ने गुलप के लिए बनाए हैं SASS को संकलित करने के लिए, छवियों का अनुकूलन करें, स्प्राइट्स बनाएं, कॉन्टेनेट फाइल करें, और बहुत कुछ!

गुल की स्थापना

चिंता मत करो, स्थापना बहुत आसान है। हमें OSX और Linux में टर्मिनल या विंडोज के लिए कमांड प्रॉम्प्ट का उपयोग करना होगा। मैं इसे अब से टर्मिनल के रूप में संदर्भित कर रहा हूँ.

इसे खोलें और npm -v टाइप करें और एंटर दबाएँ। यदि आप संस्करण संख्या प्रदर्शित करते हैं, तो आपके पास पहले से स्थापित नोड है - यह गुलप के लिए निर्भरता है.

अगर आपको ए “आदेश नहीं मिला” (या समान त्रुटि), Node.js डाउनलोड पृष्ठ पर नीचे जाएं और अपने सिस्टम के लिए उपयुक्त पैकेज चुनें। एक बार स्थापित होने पर, npm कमांड टर्मिनल में उपलब्ध होगी.

गुल्प को स्थापित करना उतना ही आसान है। टर्मिनल में निम्न कमांड पेस्ट करें, यह है:

npm स्थापित --global gulp

यह आपके सिस्टम पर विश्व स्तर पर उपलब्ध होने वाली गुलप कमांड को स्थापित करेगा.

एक परियोजना के लिए गुलदस्ता जोड़ना

गुलप अब स्थापित हो गया है, लेकिन हमें इसे अलग से अलग-अलग प्रत्येक परियोजना में जोड़ना होगा। अब एक खाली फ़ोल्डर बनाएं और इसे अपने टर्मिनल में नेविगेट करें। प्रोजेक्ट के लिए फ़ोल्डर में रहते हुए, निम्न कमांड का उपयोग करें:

npm स्थापित - save-dev gulp

यह आपके प्रोजेक्ट फ़ोल्डर में एक नोड_मॉडल फ़ोल्डर और एक npm-debug.log फ़ाइल बनाना चाहिए। ये आपकी परियोजना के लिए काम करने के लिए गुलप द्वारा उपयोग किया जाता है, आपको इस स्तर पर उनके बारे में सोचने की आवश्यकता नहीं है.

हमें प्रत्येक विशिष्ट परियोजना में गुल को जोड़ने की आवश्यकता है प्रत्येक परियोजना की अलग-अलग आवश्यकताएं होती हैं. एक SASS के लिए कॉल कर सकता है, दूसरा कम के लिए। एक Coffeescript का उपयोग कर सकता है, दूसरा नहीं हो सकता है, और इसी तरह.

गुलफिले

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

var gulp = आवश्यकता ('gulp'); gulp.task ('डिफ़ॉल्ट', फ़ंक्शन () // यह अभी के लिए कुछ नहीं करता है, हम जल्द ही कार्यक्षमता जोड़ देंगे));

एक बार यह फाइल सेव हो जाने के बाद आप अपने टर्मिनल पर वापस जा सकते हैं और अपने आप ही gulp कमांड चला सकते हैं। गुलप यह पता लगाता है कि वह किस परियोजना में है और डिफ़ॉल्ट कार्य चलाता है - एक जिसे हमने अभी बनाया है। आपको कुछ इस तरह देखना चाहिए:

वास्तव में यहां कुछ भी नहीं होता है, क्योंकि कार्य खाली है, लेकिन यह ठीक काम कर रहा है। अब, आइए कुछ उचित उदाहरणों के साथ चलें!

एक फाइल कॉपी करना

यह एक उबाऊ है, मैं उतना ही मानता हूं, लेकिन यह समझने में आपकी मदद करेगा कि आसानी से क्या हो रहा है.

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

gulp.task ('कॉपी', फंक्शन () रिटर्न gulp.src ('to_copyxt')) .pipe (gulp.dest ('dev')););

पहली पंक्ति एक कार्य को परिभाषित करती है जिसे प्रतिलिपि नाम दिया गया है। इसके भीतर हम यह बताने के लिए gulp.src का उपयोग करते हैं कि हम इस कार्य के साथ किन फ़ाइलों को लक्षित कर रहे हैं - इस मामले में यह एक एकल फ़ाइल है जिसका नाम है to_copy.txt.

फिर हम इन फ़ाइलों को gulp.dest फ़ंक्शन पर पाइप करते हैं जो निर्दिष्ट करता है कि हम इन फ़ाइलों को कहाँ रखना चाहते हैं - मैंने देव निर्देशिका का उपयोग किया है.

अपने टर्मिनल पर वापस जाएँ और टाइप करें गुल की नकल इस कार्य को चलाने के लिए, यह निर्दिष्ट फ़ाइल को निर्दिष्ट निर्देशिका में कॉपी करना चाहिए, कुछ इस तरह से:

पाइप कमांड गुलप के दिल में है। यह कमांड के बीच डेटा ले जाने का एक प्रभावी तरीका है। Src कमांड फाइल को निर्दिष्ट करता है जो कि डेस्ट कमांड पर पाईप की जाती है। किसी गंतव्य को निर्दिष्ट करने से पहले अधिक जटिल परिदृश्यों में हम अपनी फाइलों को अन्य कमांडों में पाइप करेंगे.

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

gulp.task ('कॉपी', फंक्शन () रिटर्न gulp.src ('डेवलपमेंट / *') .pipe (gulp.dest ('प्रोडक्शन')););

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

संकलित SASS

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

मैं अंकित करता हुँ स स गल Google में, पहला परिणाम आम तौर पर मुझे क्या चाहिए, आपको SASS पैकेज के लिए पेज ढूंढना चाहिए। यह आपको दिखाता है कि इसे कैसे स्थापित किया जाए (npm install gulp-sass)। संभावना है कि आपको इसे व्यवस्थापक के रूप में स्थापित करने के लिए sudo का उपयोग करने की आवश्यकता होगी, इसलिए यह संभवतः होगा (sudo npm install gulp-sass) .

एक बार हो जाने के बाद, आप अपने कोड को संकलित करने के लिए वाक्य-विन्यास का उपयोग कर सकते हैं। ऐसा करने के लिए, निम्नलिखित सामग्री के साथ एक फ़ाइल नाम style.scss बनाएं:

$ प्राथमिक: # ff9900; शरीर पृष्ठभूमि: $ प्राथमिक; 

अब गुलफ़िले में निम्न गुल कार्य बनाएँ.

gulp.task ('sass', function () gulp.src ('*। scss') .pipe (sass ()) .pipe (gulp.dest ('./ss'));)।

कमांड चलाने से पहले, इस तरह से गुलफ़िले के शीर्ष पर पैकेज की 'आवश्यकता' करना न भूलें:

var sass = आवश्यकता ('gulp-sass');

जब तुम दौड़ते हो गुल सस, scss एक्सटेंशन वाली सभी फाइलों को sass फंक्शन में पाइप किया जाएगा, जो उन्हें css में बदल देगा। फिर उन्हें गंतव्य फ़ंक्शन में पाइप किया जाता है जो उन्हें सीएसएस फ़ोल्डर में रखता है.

फ़ाइलें और फ़ोल्डर देखना

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

गुलफ़िले में, नाम से एक कमांड बनाएं को स्वचालित जो परिवर्तनों के लिए फ़ाइलों का एक सेट देखने के लिए वॉच कमांड का उपयोग करेगा, और एक फ़ाइल बदलने पर एक विशिष्ट कमांड चलाएगा.

gulp.task ('स्वचालित', फंक्शन () gulp.watch ('* * scss', ['sass']););

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

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

कई कार्य चल रहे हैं

ऐसी कई स्थितियाँ हैं जहाँ आप कई कार्य चलाना चाहते हैं। जब आप अपने जावास्क्रिप्ट फोल्डर को देख रहे हों, तो आप दो फाइलों को संकलित करना चाहते हैं और फिर उन्हें छोटा करने के लिए आगे बढ़ सकते हैं। दो तरीके हैं जिनसे आप यह कर सकते हैं.

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

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

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

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

यदि आप टाइप करते हैं गुल सस, आपकी सभी scss फाइलें css डायरेक्टरी में संकलित और सहेजी जाएँगी.

यदि आप टाइप करते हैं घूंट (डिफ़ॉल्ट कार्य), अपने स्क्रिप्ट कार्य चलाया जाएगा, उसके बाद आपका शैलियों कार्य.

गल्प स्वचालित टास्क हमारी स्कैस और js फाइलों में बदलाव के लिए कई फोल्डर को देखता है और यदि हम किसी बदलाव का पता लगा लेते हैं तो हम दोनों कार्य निष्पादित करेंगे.

अवलोकन

गुल का उपयोग करना मुश्किल नहीं है, वास्तव में, बहुत से लोग इसके सरल वाक्यविन्यास के कारण इसे ग्रंट पर पसंद करते हैं। नया स्वचालन बनाते समय उठाए जाने वाले चरणों को याद रखें:

• प्लगइन के लिए खोजें
• प्लग मैं स्थापित
• अपने गुलफ़िले में प्लगइन की आवश्यकता है
• प्रलेखन में वाक्यविन्यास का उपयोग करें

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

• गुल-छवि-अनुकूलन के साथ छवियों का अनुकूलन
• छवि बनाना, स्प्राइट के साथ स्प्राइट
• कॉनफ्लिनेटिंग फाइल्स विथ गल्प-कॉनैट
• Gulp-uglify के साथ फ़ाइलों को छोटा करना
• गुल-डेल के साथ फाइलें हटाना
• गुलाल- jslint के साथ जावास्क्रिप्ट लाइनिंग
• GSON-jsonlint के साथ JSON लाइनिंग
• गल्प-ऑटोप्रिफ़र के साथ ऑटोप्रिफ़िक्स सीएसएस
• Gulp-frep का उपयोग करके खोजें और बदलें
• CSS को gulp-minify-css के साथ Minify करें