गुलप - विकास में दर्दनाक कार्यों को स्वचालित करने के लिए एक टूलकिट

गल्प एक छोटा टूलकिट है जो दोहराए जाने वाले कार्यों को स्वचालित करता है। उन दोहराए जाने वाले कार्यों को आमतौर पर CSS, जावास्क्रिप्ट फ़ाइलों या मूल रूप से संकलित किया जाता है जब आप एक ऐसी रूपरेखा का उपयोग करते हैं जो गैर-मानक जावास्क्रिप्ट/CSS फाइलों से संबंधित होती है, तो आप एक स्वचालन उपकरण का उपयोग करना चाहेंगे जो उन फ़ाइलों को पकड़ता है, उन्हें एक साथ पैकेज करता है और सब कुछ संकलित करता है ताकि आपका ब्राउज़र आसानी से समझ सके यह।

निम्नलिखित कार्यों को स्वचालित करने के लिए गुलप उपयोगी है:

• Compiling JS and CSS files
• Refreshing browser page when you save a file
• Run a unit test
• Code analysis
• Copying modified files to a target directory

उन सभी फ़ाइलों पर नज़र रखने के लिए जिन्हें आपको एक gulp फ़ाइल बनाने की ज़रूरत है, अपने स्वचालन उपकरण या स्वचालित कार्यों को विकसित करने के लिए, आपको एक package.json फ़ाइल उत्पन्न करनी होगी। फ़ाइल में मूल रूप से इस बात का विवरण है कि आपकी परियोजना के अंदर क्या है, आपके प्रोजेक्ट को काम करने के लिए आपको किन निर्भरताओं की आवश्यकता है।

इस ट्यूटोरियल में, आप यह जानने जा रहे हैं कि गुलप को कैसे स्थापित करें और अपनी परियोजनाओं के लिए कुछ बुनियादी कार्यों को कैसे स्वचालित करें। हम npm का उपयोग करने जा रहे हैं - जो नोड पैकेज मैनेजर के लिए है। यह Node.js के साथ स्थापित किया गया है, और यदि आप पहले से ही Nodejs और npm स्थापित कर चुके हैं, तो आप यह देख सकते हैं:

# node --version
# npm --version

यदि आप इसे पहले से ही अपने सिस्टम में इंस्टॉल नहीं करते हैं, तो मैं आपको ट्यूटोरियल की जांच करने की सलाह देता हूं: लिनक्स सिस्टम में नवीनतम नोडज और एनपीएम संस्करण स्थापित करें।

कैसे Linux में स्थापित करने के लिए

निम्न आदेश का उपयोग करके gulp-cli की स्थापना को npm के साथ पूरा किया जा सकता है।

# npm install --global gulp-cli

यदि आप स्थानीय रूप से (केवल वर्तमान प्रोजेक्ट के लिए) gulp मॉड्यूल इंस्टॉल करना चाहते हैं, तो आप नीचे दिए गए निर्देशों का उपयोग कर सकते हैं:

एक परियोजना निर्देशिका बनाएं और उसमें नेविगेट करें:

# mkdir myproject
# cd myproject

अगला, अपनी परियोजना को आरंभ करने के लिए निम्नलिखित कमांड का उपयोग करें:

# npm init

उपरोक्त कमांड को चलाने के बाद, आपको अपने प्रोजेक्ट को एक नाम, संस्करण विवरण और अन्य देने के लिए कई प्रश्न पूछे जाएंगे। अंत में आपके द्वारा दी गई सभी जानकारी की पुष्टि करें:

अब हम अपने प्रोजेक्ट में gulp पैकेज स्थापित कर सकते हैं:

# npm install --save-dev gulp

पैकेज-सेव विकल्प npm को package.json फ़ाइल को नई devD dependencies के साथ अद्यतन करने के लिए कहता है।

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

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

आप अपने gulpfile.js में निम्न कोड डाल सकते हैं:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

फ़ाइल को सहेजें और अब इसे चलाने की कोशिश करें:

# gulp hello

आपको निम्न परिणाम देखना चाहिए:

यहाँ उपरोक्त कोड क्या है:

• var gulp = require(‘gulp’); – imports the gulp module.
• gulp.task(‘hello’, function(done) { – defines a task that will be available from the command line.
• console.log(‘Hello world!’); – simply prints “Hellow world!” to the screen.
• done(); – we use this callback function to instruct gulp that our tasks has finished.

बेशक ऊपर सिर्फ यह दिखाने के लिए एक नमूना था कि कैसे gulpfile.js आयोजित किया जा सकता है। यदि आप अपने gulpfile.js से उपलब्ध कार्यों को देखना चाहते हैं, तो आप निम्नलिखित आदेशों का उपयोग कर सकते हैं:

# gulp --tasks

Gulp में हजारों प्लगइन्स उपलब्ध हैं, सभी अलग-अलग कार्यक्षमता प्रदान करते हैं। आप उन्हें गुलप के प्लगइन पृष्ठ पर देख सकते हैं।

नीचे हम एक अधिक व्यावहारिक उदाहरण में minify-html प्लगइन का उपयोग करेंगे। नीचे दिए गए फ़ंक्शन के साथ, आप HTML फ़ाइलों को छोटा कर सकते हैं और उन्हें नई निर्देशिका में रख सकते हैं। लेकिन पहले, हम gulp-minify-html प्लगइन स्थापित करेंगे:

# npm install --save-dev gulp-minify-html

आप अपने gulpfile.js को इस तरह देख सकते हैं:

# cat gulpfile.js

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

तब आप निम्न आदेशों का उपयोग करके HTML फ़ाइलों को छोटा कर सकते हैं।

# gulp minify-html
# du -sh /src dest/

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