ग्रंट - त्वरित गाइड
ग्रंट क्या है?
ग्रंट एक जावास्क्रिप्ट टास्क रनर है जिसे जावास्क्रिप्ट ऑब्जेक्ट्स के लिए कमांड लाइन टूल के रूप में उपयोग किया जा सकता है। यह NodeJS के शीर्ष पर लिखा गया एक कार्य प्रबंधक है।
ग्रंट का उपयोग क्यों करें?
ग्रंट दोहराए जाने वाले कार्यों को बहुत आसानी से कर सकते हैं, जैसे कि संकलन, यूनिट परीक्षण, फाइल को छोटा करना, परीक्षण चलाना आदि।
ग्रंट में अंतर्निहित कार्य शामिल हैं जो आपके प्लगइन्स और स्क्रिप्ट की कार्यक्षमता का विस्तार करते हैं।
ग्रंट का पारिस्थितिकी तंत्र बहुत बड़ा है; आप बहुत कम प्रयास से किसी भी चीज़ को स्वचालित कर सकते हैं।
इतिहास
स्रोत कोड की पहली पंक्तियों को 2011 में ग्रंटज में जोड़ा गया था। ग्रंट v0.4 18 फरवरी, 2013 को जारी किया गया था। ग्रंट v0.4.5 12 मई 2014 को जारी किया गया था। ग्रंट का स्थिर संस्करण 1.0.0 आरसी 1 है 11 फरवरी, 2016 को जारी किया गया था।
लाभ
ग्रंट का उपयोग करके, आप आसानी से फाइल का परीक्षण, संकलन और परीक्षण कर सकते हैं।
ग्रंट वेब डेवलपर्स के वर्कफ़्लो को एकीकृत करता है।
आप आसानी से ग्रंट का उपयोग करके एक नए कोडबेस के साथ काम कर सकते हैं क्योंकि इसमें कम बुनियादी ढांचा है।
यह विकास वर्कफ़्लो को गति देता है और परियोजनाओं के प्रदर्शन को बढ़ाता है।
नुकसान
जब कभी npm पैकेज अपडेट किए जाते हैं, आपको तब तक इंतजार करना होगा जब तक कि ग्रंट के लेखक इसे अपडेट न करें।
प्रत्येक कार्य एक निर्दिष्ट कार्य करने के लिए डिज़ाइन किया गया है। यदि आप एक निर्दिष्ट कार्य का विस्तार करना चाहते हैं, तो आपको काम पूरा करने के लिए कुछ ट्रिक्स का उपयोग करने की आवश्यकता है।
ग्रंट में व्यक्तिगत प्लगइन्स के लिए बड़ी संख्या में कॉन्फ़िगरेशन पैरामीटर शामिल हैं। आमतौर पर, ग्रंट कॉन्फ़िगरेशन फ़ाइलें लम्बाई में होती हैं।
ग्रंट एक जावास्क्रिप्ट आधारित टास्क रनर है जिसका अर्थ है कि यह वर्कफ़्लो में दोहराए जाने वाले कार्यों को स्वचालित कर सकता है और इसे जावास्क्रिप्ट ऑब्जेक्ट्स के लिए कमांड लाइन टूल के रूप में उपयोग किया जा सकता है।
ग्रंटज की कुछ सबसे प्रमुख विशेषताएं नीचे सूचीबद्ध हैं -
ग्रन्ट वर्कफ़्लो को सेटअप फ़ाइल लिखने जितना आसान बनाता है।
आप न्यूनतम प्रयास के साथ दोहराए जाने वाले कार्यों को स्वचालित कर सकते हैं।
ग्रंट NodeJS पर आधारित एक लोकप्रिय टास्क रनर है। यह लचीला और व्यापक रूप से अपनाया जाता है।
इसका सीधा दृष्टिकोण है जिसमें JS में कार्य और JSON में कॉन्फिगरेशन शामिल है।
ग्रंट जावास्क्रिप्ट, सीएसएस फाइलों, परीक्षण फाइलों का संकलन, सीएसएस प्रीप्रोसेसर फाइल (एसएएसएस, लेस), आदि का संकलन करता है।
ग्रंट में अंतर्निहित कार्य शामिल हैं जो आपके प्लगइन्स और स्क्रिप्ट की कार्यक्षमता का विस्तार करते हैं।
यह विकास वर्कफ़्लो को गति देता है और परियोजनाओं के प्रदर्शन को बढ़ाता है।
आप आसानी से ग्रंट का उपयोग करके एक नए कोडबेस के साथ काम कर सकते हैं क्योंकि इसमें कम बुनियादी ढांचा है।
ग्रंट का पारिस्थितिकी तंत्र बहुत बड़ा है; आप बहुत कम प्रयास से किसी भी चीज़ को स्वचालित कर सकते हैं।
ग्रंट दोहराए जाने वाले कार्यों को करते समय त्रुटियों को प्राप्त करने की संभावना को कम करता है।
वर्तमान में ग्रंट में 4000 से अधिक प्लगइन्स हैं।
इसका उपयोग बड़े उत्पादन स्थलों में किया जा सकता है।
यह अध्याय चरण-दर-चरण प्रक्रिया प्रदान करता है कि आपके सिस्टम पर ग्रंट को कैसे स्थापित किया जाए।
ग्रन्ट के लिए सिस्टम आवश्यकताएँ
Operating System - क्रॉस-प्लेटफॉर्म
Browser Support - IE (इंटरनेट एक्सप्लोरर 8+), फ़ायरफ़ॉक्स, गूगल क्रोम, सफारी, ओपेरा
ग्रंट की स्थापना
Step 1- हमें ग्रंट को चलाने के लिए NodeJs की आवश्यकता है। NodeJs डाउनलोड करने के लिए, लिंक खोलेंhttps://nodejs.org/en/, आप नीचे दिखाए गए अनुसार एक स्क्रीन देखेंगे -
ज़िप फ़ाइल का नवीनतम सुविधाएँ संस्करण डाउनलोड करें ।
Step 2- इसके बाद, अपने कंप्यूटर पर NodeJs स्थापित करने के लिए सेटअप चलाएँ ।
Step 3- इसके बाद, आपको पर्यावरण चर सेट करने की आवश्यकता है ।
Path User Variable
- राईट क्लिक करें My Computer।
- चुनते हैं Properties।
- इसके बाद सेलेक्ट करें Advanced टैब पर क्लिक करें Environment Variables।
एन्वायरमेंट वेरिएबल्स विंडो के तहत , स्क्रीन पर दिखाए गए पैटर्न के अनुसार डबल क्लिक करें ।
आपको एक एडिट यूजर वेरिएबल विंडो मिलेगी जैसा कि दिखाया गया है। वैरिएबल मान फ़ील्ड में NodeJs फ़ोल्डर पथ को C: \ Program Files \ nodejs \ node_modules \ npm के रूप में जोड़ें । यदि पथ अन्य फ़ाइलों के लिए पहले से ही सेट है, तो आपको उसके बाद एक अर्धविराम (;) लगाने की आवश्यकता है और नीचे दिखाए अनुसार NodeJs पथ जोड़ें;
आखिर में OK बटन पर क्लिक करें।
System Variable
सिस्टम चर के तहत , पथ पर डबल क्लिक करें जैसा कि निम्नलिखित स्क्रीन में दिखाया गया है।
आपको दिखाए अनुसार एडिट सिस्टम वैरिएबल विंडो मिलेगी । वैरिएबल मान फ़ील्ड में NodeJs फ़ोल्डर पथ को C: \ Program Files \ n नोड्स के रूप में जोड़ें और नीचे दिखाए गए अनुसार ठीक क्लिक करें -
Step 4 - अपने सिस्टम पर ग्रंट स्थापित करने के लिए आपको वैश्विक स्तर पर ग्रंट की कमांड लाइन इंटरफेस (CLI) स्थापित करने की आवश्यकता है जैसा कि नीचे दिखाया गया है -
npm install -g grunt-cli
उपरोक्त कमांड चलाने से आपके सिस्टम पथ में ग्रंट कमांड को रखा जाएगा , जो इसे किसी भी निर्देशिका से चलाने के लिए बनाता है।
स्थापित कर रहा है घुरघुराना-CLI ग्रंट कार्य धावक स्थापित नहीं है। ग्रंट -क्लि की भूमिका ग्रंट के संस्करण को चलाने के लिए है जिसे ग्रंटफाइल के बगल में स्थापित किया गया है । यह एक मशीन को ग्रंट के कई संस्करणों को एक साथ स्थापित करने की अनुमति देता है।
Step 5 - अब, हम बनाएंगे configuration files ग्रंट को चलाने के लिए।
package.json
Package.json फ़ाइल पास करने के लिए परियोजना के रूट निर्देशिका में रखा गया है, Gruntfile । Package.json जब भी आप आदेश चला सही ढंग से प्रत्येक सूचीबद्ध निर्भरता को चलाने के लिए प्रयोग किया जाता हैnpm install package.json के रूप में एक ही फ़ोल्डर में।
T मूल पैकेज.जॉन कमांड प्रॉम्प्ट में निम्नलिखित कमांड टाइप करके बनाया जा सकता है -
npm init
मूल पैकेज.जॉन फ़ाइल को नीचे दिखाया गया है -
{
"name": "tutorialspoint",
"version": "0.1.0",
"devDependencies": {
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
आप निम्न आदेश के माध्यम से एक मौजूदा pacakge.json फ़ाइल में ग्रन्ट और ग्रन्टप्लगिन्स जोड़ सकते हैं -
npm install <module> --save-dev
उपरोक्त कमांड में, <मॉड्यूल> स्थानीय रूप से स्थापित किए जाने वाले मॉड्यूल का प्रतिनिधित्व करता है। उपरोक्त कमांड भी स्वचालित रूप से devD dependencies के लिए <मॉड्यूल> जोड़ देगा ।
उदाहरण के लिए, निम्न आदेश का नवीनतम संस्करण नवीनतम स्थापित हो जाएगा ग्रंट और अपने में शामिल करता है devDependencies -
npm install grunt --save-dev
Gruntfile.js
Gruntfile.js फ़ाइल ग्रंट के लिए हमारे विन्यास परिभाषित करने के लिए प्रयोग किया जाता है। यह वह स्थान है जहां हमारी सेटिंग्स लिखी जाएगी। मूल Gruntfile.js फ़ाइल को नीचे दिखाया गया है -
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration goes here
uglify: {
// uglify task configuration
options: {},
build: {}
}
});
// log something
grunt.log.write('Hello world! Welcome to Tutorialspoint!!\n');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
ग्रंट का उपयोग करने के लिए, आपको Node.js स्थापित करना होगा। Node.js की स्थापना पिछले अध्याय में बताई गई है । आप Node.js पैकेज मैनेजर का उपयोग करके ग्रंट और ग्रंट प्लग इन स्थापित कर सकते हैं।
सिस्टम पर ग्रंट स्थापित करने से पहले, आप निम्नलिखित कमांड का उपयोग करके नोड पैकेज मैनेजर को अपडेट कर सकते हैं -
npm update -g npm
यदि आप मैक या लिनक्स का उपयोग कर रहे हैं, तो आपको प्रशासक पहुंच प्रदान करने के लिए कमांड लाइन की शुरुआत में sudo शब्द का उपयोग करने की आवश्यकता है जैसा कि नीचे दिखाया गया है -
sudo npm update -g npm
सीएलआई स्थापना
सीएलआई का मतलब कमांड लाइन इंटरफेस है जो ग्रंट के संस्करण को चलाता है जिसे स्थापित किया गया है। ग्रंट के साथ शुरुआत करने के लिए, आपको वैश्विक रूप से ग्रंट की कमांड लाइन इंटरफेस (सीएलआई) स्थापित करने की आवश्यकता है जैसा कि नीचे दिखाया गया है -
npm install -g grunt-cli
उपरोक्त कमांड चलाने से आपके सिस्टम पथ में ग्रंट कमांड को रखा जाएगा, जो इसे किसी भी निर्देशिका से चलाने के लिए बनाता है। आप ग्रंट टास्क रनर को ग्रंट-क्ली स्थापित करके स्थापित नहीं कर सकते । यह एक मशीन को ग्रंट के कई संस्करणों को एक साथ स्थापित करने की अनुमति देता है।
सीएलआई का कार्य करना
जब भी ग्रन्ट चलाया जाता है, तब आवश्यकता () सिस्टम का उपयोग करके अपने सिस्टम पर स्थापित ग्रंट के लिए सीएलआई दिखता है। ग्रंट-क्ली का उपयोग करके , आप अपने प्रोजेक्ट में किसी भी निर्देशिका से ग्रंट चला सकते हैं। यदि आप स्थानीय रूप से स्थापित ग्रंट का उपयोग कर रहे हैं, तो ग्रंट-क्ली स्थानीय रूप से स्थापित ग्रंट लाइब्रेरी का उपयोग करता है और ग्रंट फ़ाइल से कॉन्फ़िगरेशन लागू करता है।
एक मौजूदा और नई परियोजना के साथ काम करना
आप एक पहले से ही कॉन्फ़िगर परियोजना है कि शामिल है के साथ काम कर रहे हैं, तो package.json और Gruntfile , तो सरल कदम नीचे निर्दिष्ट है का पालन करें -
- प्रोजेक्ट के रूट डायरेक्टरी के लिए रास्ता खोजें।
- आप npm स्थापित कमांड का उपयोग करके निर्भरताएं स्थापित कर सकते हैं ।
- भागो ग्रंट का उपयोग कर घुरघुराना आदेश।
यदि आप एक नई परियोजना बना रहे हैं, तो अपनी परियोजना के लिए दो फाइलें पैकेज। जसन और ग्रंटफाइल शामिल करें।
package.json- Package.json फ़ाइल को प्रोजेक्ट के रूट डायरेक्टरी में रखा जाता है और जब भी आप कमांड एनपीएम इंस्टॉल करते हैं , तो इसे एक ही फ़ोल्डर में चलाने के लिए प्रत्येक सूचीबद्ध निर्भरता को चलाने के लिए उपयोग किया जाता है ।
Gruntfile.js - Gruntfile.js फ़ाइल का उपयोग प्रोजेक्ट के लिए कॉन्फ़िगरेशन सेटिंग्स लिखने के लिए किया जाता है।
package.json
Package.json फ़ाइल परियोजना के रूट निर्देशिका में रखा गया है, बगल में Gruntfile और जब भी आप आदेश चला प्रत्येक सूचीबद्ध निर्भरता को चलाने के लिए प्रयोग किया जाता है NPM स्थापित एक ही फ़ोल्डर में।
आप नीचे सूचीबद्ध अनुसार विभिन्न तरीकों से package.json बना सकते हैं -
- आप package.json फ़ाइल बनाने के लिए ग्रंट -इनिट कर सकते हैं ।
- Npm-init कमांड का उपयोग करके आप package.json फ़ाइल भी बना सकते हैं ।
आप नीचे लिखे अनुसार विनिर्देश लिख सकते हैं -
{
"name": "tutorialspoint",
"version": "0.1.0",
"devDependencies": {
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
आप निम्न आदेश का उपयोग करके किसी मौजूदा pacakge.json फ़ाइल में Grunt और gruntplugins जोड़ सकते हैं -
npm install <module> --save-dev
यहां, <मॉड्यूल> स्थानीय रूप से स्थापित किए जाने वाले मॉड्यूल का प्रतिनिधित्व करता है। उपर्युक्त कमांड निर्दिष्ट मॉड्यूल को स्थापित करेगा और स्वचालित रूप से इसे devD निर्भरता अनुभाग में जोड़ देगा ।
उदाहरण के लिए, निम्न आदेश का नवीनतम संस्करण स्थापित होगा ग्रंट और अपने में जोड़ने devDependencies -
npm install grunt --save-dev
Gruntfile
Gruntfile.js फ़ाइल एक डिफ़ॉल्ट जगह अपने विन्यास सेटिंग्स ग्रंट के लिए जाना होगा, जहां है। ग्रंट फ़ाइल में निम्नलिखित भाग शामिल हैं -
- आवरण समारोह
- परियोजना और कार्य विन्यास
- ग्रंट प्लगइन्स और कार्यों को लोड करना
- कस्टम कार्य
मूल Gruntfile.js फ़ाइल को नीचे दिखाया गया है -
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration goes here
});
// Load the plugin that provides the "uglify" task
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s)
grunt.registerTask('default', ['uglify']);
};
आवरण समारोह
उपरोक्त कोड में, माड्यूल.एक्सपोर्ट एक रैपर फंक्शन है जहाँ पूरा फंक्शन इस फंक्शन के अंदर जाता है। यह शेष एप्लिकेशन के लिए कॉन्फ़िगरेशन प्रदर्शित करने का एक तरीका है।
module.exports = function(grunt) {
//do grunt-related things here
}
परियोजना और कार्य विन्यास
एक बार जब आपका ग्रंट कॉन्फ़िगरेशन तैयार हो जाता है, तो आप ग्रंट कार्यों को कॉन्फ़िगर कर सकते हैं। प्रोजेक्ट कॉन्फ़िगरेशन को grunt.initConfig () अनुभाग में लिखा जा सकता है । Grunt.initConfig () फ़ंक्शन के अंदर, पैकेज.जॉन फ़ाइल से कॉन्फ़िगरेशन की जानकारी लें और इसे pkg में सहेजें । आप का उपयोग कर अपने प्रोजेक्ट के नाम पर कॉल कर सकते pkg.name साथ और संस्करण pkg.version ।
ग्रंट प्लगइन्स और कार्य लोड हो रहे हैं
Grunt.loadNpmTasks विधि का उपयोग करके किसी निर्दिष्ट प्लगइन से कार्यों को लोड करें । आप स्थानीय स्तर पर प्लगइन का उपयोग करके स्थापित कर सकते हैंnpmऔर यह ग्रंटफाइल के सापेक्ष होना चाहिए। आप नीचे दिखाए गए अनुसार एक साधारण कमांड से प्लगइन लोड कर सकते हैं -
grunt.task.loadNpmTasks(pluginName)
कस्टम कार्य
जब आप कमांड लाइन के माध्यम से ग्रंट चला रहे हैं, तो ग्रंट डिफ़ॉल्ट कार्य के लिए दिखेगा । उपरोक्त कोड में, हम एक काम कहा जाता है का उपयोग कर रहे बदसूरत करना जो का उपयोग कर चलाया जा सकता है घुरघुराना आदेश। यह स्पष्ट रूप से चल रहे ग्रंट क्रुसिलाइज़ कमांड के समान है और आप सरणी में कार्यों की संख्या निर्दिष्ट कर सकते हैं।
grunt.registerTask('default', ['uglify']);
आप Gruntfile.js फ़ाइल में Grunt के लिए प्रोजेक्ट-विशिष्ट कॉन्फ़िगरेशन डेटा को परिभाषित कर सकते हैं ।
ग्रांट कॉन्फ़िगरेशन
Grunt.initConfig () पद्धति का उपयोग करके कार्य कॉन्फ़िगरेशन डेटा को ग्रंटफाइल में आरंभीकृत किया जा सकता है । Grunt.initConfig () फ़ंक्शन के अंदर , package.json फ़ाइल से कॉन्फ़िगरेशन जानकारी लें। कॉन्फ़िगरेशन नाम का एक कार्य होगाproperties और कोई भी मनमाना डेटा।
grunt.initConfig({
jshint: {
// configuration for jshint task
},
cssmin: {
// configuration for cssmin task
},
// Arbitrary non-task-specific properties
my_files: ['dir1/*.js', 'dir2/*.js'],
});
कार्य विन्यास और लक्ष्य
जब आप कोई कार्य चला रहे होते हैं, तो ग्रंट कार्य-नामित संपत्ति के तहत कॉन्फ़िगरेशन की तलाश करता है। हम नीचे दिखाए गए अनुसार कई कॉन्फ़िगरेशन और लक्ष्य विकल्पों के साथ कार्यों को परिभाषित करेंगे -
grunt.initConfig({
jshint: {
myfile1: {
// configuration for "myfile1" target options
},
myfile2: {
// configuration for "myfile2" target options
},
},
cssmin: {
myfile3: {
// configuration for "myfile3" target options
},
},
});
यहाँ, jshint टास्क में myfile1 और myfile2 टारगेट और cssmin टास्क में myfile3 टारगेट है। जब आप ग्रंट जिशंट चला रहे होते हैं , तो यह निर्दिष्ट लक्ष्य विन्यास को संसाधित करने के लिए कार्य और लक्ष्य दोनों पर पुनरावृत्ति करेगा।
विकल्प
कार्य कॉन्फ़िगरेशन के अंदर विकल्प संपत्ति को परिभाषित करें जो कार्य चूक को ओवरराइड करता है। प्रत्येक लक्ष्य में विकल्प संपत्ति शामिल होती है जो कार्य-स्तर के विकल्पों को ओवरराइड करती है। यह निम्नलिखित प्रारूप होगा -
grunt.initConfig({
jshint: {
options: {
// task-level options that overrides task defaults
},
myfile: {
options: {
// "myfile" target options overrides task defaults
},
},
myfile1: {
// there is no option, target will use task-level options
},
},
});
फ़ाइलें
ग्रंट निर्दिष्ट करने के लिए कुछ विचार प्रदान करता है कि किस फाइल पर कार्य संचालित होना चाहिए और src-dest फ़ाइल मैपिंग को निर्दिष्ट करने के लिए विभिन्न तरीकों का उपयोग करता है । निम्नलिखित कुछ अतिरिक्त गुण हैं जो src और डेस्ट मैपिंग द्वारा समर्थित हैं -
filter- यह एक फ़ंक्शन है जो मिलान किए गए src फ़ाइल पथ को निर्दिष्ट करता है और सही या गलत मान देता है।
nonull - यह नॉन मैचिंग पैटर्न को परिभाषित करता है, जब यह सच हो जाता है।
dot - यह एक अवधि या अन्यथा के साथ शुरू होने वाले फ़ाइल नामों से मेल खाता है।
matchBase - यह उन पैटर्नों से मेल खाता है जिनमें पथ के बेसनेम के साथ स्लैश होते हैं।
expand - यह src-dest file मैपिंग को प्रोसेस करता है।
कॉम्पैक्ट प्रारूप
यह प्रति लक्ष्य src-dest फ़ाइल मैपिंग को निर्दिष्ट करता है जिसका उपयोग केवल-पढ़ने वाले कार्यों के लिए किया जा सकता है और इसके लिए केवल src प्रॉपर्टी और न ही कोई डेस्ट प्रॉपर्टी की आवश्यकता होती है।
grunt.initConfig({
jshint: {
myfile1: {
src: ['src/file1.js','src/file2.js']
},
},
cssmin: {
myfile2: {
src: ['src/file3.js','src/file4.js'],
dest: 'dest/destfile.js',
},
},
});
फ़ाइलें ऑब्जेक्ट स्वरूप
यह प्रति लक्ष्य src-dest फ़ाइल मैपिंग को निर्दिष्ट करता है जिसमें संपत्ति का नाम भाग्य फ़ाइल है और इसका मान src फ़ाइल है।
grunt.initConfig({
jshint: {
myfile1: {
files: {
'dest/destfile.js':['src/file1.js','src/file2.js'],
'dest/destfile1.js':['src/file3.js','src/file4.js'],
},
},
myfile2: {
files: {
'dest/destfile2.js':['src/file22.js','src/file23.js'],
'dest/destfile21.js':['src/file24.js','src/file25.js'],
},
},
},
});
फ़ाइलें सरणी प्रारूप
यह प्रति मैपिंग अतिरिक्त गुण का उपयोग करके प्रति लक्ष्य src-dest फ़ाइल मैपिंग को निर्दिष्ट करता है।
grunt.initConfig({
jshint: {
myfile1: {
files: [
{src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
{src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
],
},
myfile2: {
files: [
{src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
{src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
],
},
},
});
पुराने प्रारूप
गंतव्य के रूप में लक्ष्य फ़ाइल स्वरूप multitasks के अस्तित्व जहां गंतव्य फ़ाइल पथ लक्ष्य का नाम है से पहले नहीं थी। निम्नलिखित प्रारूप को पदावनत किया गया है और इसका उपयोग कोड में नहीं किया जाना है।
grunt.initConfig({
jshint: {
'dest/destfile2.js':['src/file3.js','src/file4.js'],
'dest/destfile5.js':['src/file6.js','src/file7.js'],
},
});
कस्टम फ़िल्टर फ़ंक्शन
आप फ़िल्टर फ़ाइलों का उपयोग करके बड़े स्तर के विस्तार के साथ लक्ष्य फ़ाइलों की मदद कर सकते हैं। निम्न प्रारूप केवल फ़ाइलों को साफ़ करता है यदि यह वास्तविक फ़ाइल से मेल खाता है।
grunt.initConfig({
clean: {
myfile:{
src: ['temp/**/*'],
filter: 'isFile',
},
},
});
ग्लोबिंग पैटर्न
ग्लोबिंग का अर्थ है फ़ाइल नाम का विस्तार करना। ग्रंट अंतर्निहित नोड-ग्लोब और मिनिमैच लाइब्रेरी का उपयोग करके ग्लोबिंग का समर्थन करता है । ग्लोबिंग पैटर्न में निम्नलिखित बिंदु शामिल हैं -
- * किसी भी वर्ण से मेल खाता है, लेकिन नहीं / ।
- ? एक एकल चरित्र से मेल खाता है, लेकिन / नहीं ।
- ** सहित कई पात्रों से मेल खाता है / ।
- {} "या" अभिव्यक्तियों की अल्पविराम से अलग सूची निर्दिष्ट करता है।
- ! शुरुआत में पैटर्न मैच को नकार देगा।
उदाहरण के लिए -
{src: 'myfile/file1.js', dest: ...} // it specifies the single file
{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js
{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern
{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha
// order except for file1.js
फाइलों को गतिशील रूप से बनाना
जब आप अलग-अलग फ़ाइलों के साथ काम कर रहे हैं, तो आप गतिशील रूप से फ़ाइलों की सूची बनाने के लिए अतिरिक्त गुणों का उपयोग कर सकते हैं। जब आप सेट करते हैंexpand संपत्ति को सच करने के लिए, यह निम्नलिखित गुणों में से कुछ को सक्षम करेगा -
cwd इस पथ पर सभी src से मेल खाता है।
src , cwd के सापेक्ष मैच करने के पैटर्न से मेल खाता है ।
गंतव्य संपत्ति गंतव्य पथ उपसर्ग को निर्दिष्ट करती है।
ext मौजूदा रास्तों को गंतव्य रास्तों में उत्पन्न मान से बदल देगा ।
extDot इंगित करता है कि एक्सटेंशन दर्शाने वाली अवधि कहाँ स्थित है। यह या तो पहली अवधि या अंतिम अवधि का उपयोग करता है ; डिफ़ॉल्ट रूप से, यह पहली अवधि के लिए सेट है
चपटा भाग्य पथ से सभी पथ भागों को निकालता है।
नाम बदलने के लिए एक स्ट्रिंग है जिसमें नया गंतव्य और फ़ाइल नाम है।
नाम बदलें संपत्ति
यह एक अद्वितीय जावास्क्रिप्ट फ़ंक्शन है जो एक स्ट्रिंग लौटाता है और आप नाम बदलने के लिए स्ट्रिंग मान का उपयोग नहीं कर सकते। निम्नलिखित उदाहरण में, कॉपी कार्य README.md का बैकअप बनाएगा।
grunt.initConfig({
copy: {
backup: {
files: [{
expand: true,
src: ['docs/README.md'], // creating a backup of README.md
rename: function () { // specifies the rename function
return 'docs/BACKUP.txt'; // returns a string with the complete destination
}
}]
}
}
});
टेम्पलेट्स
आप <%%> सीमांकक का उपयोग करके टेम्पलेट निर्दिष्ट कर सकते हैं । जब वे कॉन्फ़िगर से पढ़े जाते हैं तो वे अपने आप विस्तारित हो जाएंगे। इसमें दो प्रकार के गुण शामिल हैं -
<%= prop.subprop %>प्रॉपर्टी का उपयोग config में prop.subprop के मान को विस्तारित करने के लिए किया जाता है जो स्ट्रिंग मानों, सरणियों और अन्य वस्तुओं को संदर्भित कर सकता है।
<% %> संपत्ति इनलाइन जावास्क्रिप्ट कोड को निष्पादित करती है जो नियंत्रण प्रवाह या लूपिंग के लिए उपयोग किया जाता है।
उदाहरण के लिए -
grunt.initConfig({
concat: {
myfile: {
options: {
banner: '/* <%= val %> */\n',
},
src: ['<%= myval %>', 'file3/*.js'],
dest: 'build/<%= file3 %>.js',
},
},
// properties used in task configuration templates
file1: 'c',
file2: 'b<%= file1 %>d',
file3: 'a<%= file2 %>e',
myval: ['file1/*.js', 'file2/*.js'],
});
बाहरी डेटा आयात करना
आप package.json फ़ाइल से बाहरी डेटा आयात कर सकते हैं । स्रोत फ़ाइल को छोटा करने के लिए grunt- contrib- uglify प्लगइन का उपयोग किया जा सकता है और यह मेटाडेटा का उपयोग करके एक बैनर टिप्पणी बनाता है। आप JSON और YAML डेटा आयात करने के लिए grunt.file.readJSON और grunt.file.readYAML का उपयोग कर सकते हैं ।
उदाहरण के लिए -
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
src: 'src/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
}
});
इस अध्याय में, हम निम्नलिखित प्लगइन्स का उपयोग करके एक सरल ग्रन्ट फ़ाइल बनाते हैं -
- grunt-contrib-uglify
- grunt-contrib-concat
- grunt-contrib-jshint
- grunt-contrib-watch
उपर्युक्त सभी प्लगइन्स को स्थापित करें और एक सरल Gruntfile.js बनाने के लिए नीचे दिए गए चरणों का पालन करें -
Step 1- आपको एक रैपर फ़ंक्शन बनाने की आवश्यकता है , जो आपके ग्रंट के लिए कॉन्फ़िगरेशन को एन्क्रिप्ट करता है।
module.exports = function(grunt) {};
Step 2 - नीचे दिखाए अनुसार अपनी कॉन्फ़िगरेशन ऑब्जेक्ट को आरम्भिक करें -
grunt.initConfig({});
Step 3- इसके बाद, pkg प्रॉपर्टी में package.json फ़ाइल से प्रोजेक्ट सेटिंग्स पढ़ें । यह हमें आपके package.json फ़ाइल के भीतर गुण मानों को संदर्भित करने में सक्षम बनाता है ।
pkg: grunt.file.readJSON('package.json')
Step 4- अगला, आप कार्यों के लिए कॉन्फ़िगरेशन परिभाषित कर सकते हैं। चलिए src / folder में मौजूद सभी फाइलों को समाप्त करने के लिए अपना पहला टास्क कॉनैट बनाते हैं और distat / फोल्डर के तहत कॉनैटेटेट .js फाइल को स्टोर करते हैं ।
concat: {
options: {
// define a string to insert between files in the concatenated output
separator: ';'
},
dist: {
// files needs to be concatenated
src: ['src/**/*.js'],
// location of the concatenated output JS file
dest: 'dist/<%= pkg.name %>.js'
}
}
Step 5- अब, हम अपने जावास्क्रिप्ट को छोटा करने के लिए एक और कार्य बनाते हैं जिसे uglify कहा जाता है ।
uglify: {
options: {
// banner will be inserted at the top of the output which displays the date and time
banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
उपरोक्त कार्य, डिस्टर्ब / फोल्डर के भीतर एक फाइल बनाता है जिसमें की। Js फाइलें होती हैं। <%= concat.dist.dest %>उस कार्य को संक्षिप्त करने के लिए क्रमाकुंचन का निर्देश देगा जो कि कार्य कार्य उत्पन्न करता है।
Step 6- jshint टास्क बनाकर JSHint प्लगइन को कॉन्फ़िगर करें ।
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/**/*.js'],
// configure JSHint
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
}
}
}
उपरोक्त jshint कार्य फ़ाइलों की एक सरणी और फिर विकल्पों की एक वस्तु को स्वीकार करता है। उपरोक्त कार्य Gruntfile.js और src / ** / *। Js फ़ाइलों में किसी भी कोडिंग उल्लंघन के लिए दिखेगा ।
Step 7- अगला, हमारे पास घड़ी का कार्य है जो किसी भी निर्दिष्ट फाइल में परिवर्तन की तलाश करता है और आपके द्वारा निर्दिष्ट कार्यों को चलाता है।
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
Step 8- इसके बाद, हमें ग्रंट प्लगइन्स को लोड करना होगा जो सभी _npm के माध्यम से इंस्टॉल किए गए हैं ।
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
Step 9- अंत में, हमें डिफ़ॉल्ट कार्य को परिभाषित करना होगा।
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
डिफ़ॉल्ट कार्य सिर्फ टाइप करके चलाया जा सकता है घुरघुराना कमांड लाइन पर आदेश।
यहाँ आपका पूरा Gruntfile.js है -
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/**/*.js'],
// configure JSHint
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
इस अध्याय में, हम कार्यों को बनाने के बारे में सीखते हैं । जब भी आप ग्रंट चलाते हैं, तो एक या अधिक कार्यों को चलाने के लिए निर्दिष्ट किया जाता है जो ग्रंट को सूचित करता है कि आप क्या करना चाहते हैं। यदि आप डिफ़ॉल्ट कार्य निर्दिष्ट करते हैं , तो यह डिफ़ॉल्ट रूप से चलेगा।
उपनाम के कार्य
जब भी कार्यों की एक सूची निर्दिष्ट की जाती है, तो एक या एक से अधिक अन्य कार्यों को एक नए कार्य द्वारा अलियास किया जा सकता है। उपनाम चलाने से टास्कलिस्ट में प्रत्येक निर्दिष्ट कार्य चलेंगे । कार्यसूची तर्क कार्यों की एक सरणी के रूप में नीचे दिखाया गया होना चाहिए -
grunt.registerTask(taskName, [description, ] taskList)
उदाहरण के लिए, जब आप एक परिभाषित कार्यसूची के साथ JSHint , concat, और बदसूरत बनाना कार्यों और निर्दिष्ट taskName के रूप में डिफ़ॉल्ट , सभी सूचीबद्ध कार्य स्वचालित रूप से अगर चलाया जाएगा ग्रंट किसी भी कार्य निर्धारित किए बिना ही मार डाला जाता है।
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
आप नीचे दिए गए अनुसार कार्य तर्क भी निर्दिष्ट कर सकते हैं -
grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);
ऊपर कार्य में, उर्फ जिले दोनों चलाता concat और बदसूरत बनाना कार्यों।
मल्टी टास्क
जब भी आप कई कार्य चलाते हैं, तो ग्रंट ग्रंट कॉन्फ़िगरेशन में एक ही नाम की संपत्ति की खोज करता है। इन कार्यों में कई कॉन्फ़िगरेशन हो सकते हैं, जिन्हें मनमाने ढंग से नामित लक्ष्यों का उपयोग करके परिभाषित किया जाएगा ।
जब आप एक कार्य और लक्ष्य दोनों को निर्दिष्ट करते हैं, तो केवल निर्दिष्ट लक्ष्य कॉन्फ़िगरेशन को संसाधित किया जाएगा।
grunt concat:foo
उपरोक्त कमांड केवल लक्ष्य foo चलाएगा ।
जब आप केवल एक कार्य निर्दिष्ट करते हैं, तो सभी लक्ष्यों को संसाधित किया जाएगा।
grunt concat
उपरोक्त आदेश के सभी लक्ष्यों से अधिक पुनरावृति जाएगा concat कार्य।
जब आप grunt.task.renameTask के साथ किसी कार्य का नाम बदलते हैं , तो नए कार्य नाम वाली संपत्ति को ग्रंट द्वारा कॉन्फ़िगर ऑब्जेक्ट में खोजा जाता है।
grunt.initConfig({
log: {
foo: [1, 2, 3],
bar: 'Welcome to tutorialspoint',
sap: true
}
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target + ': ' + this.data);
});
उपरोक्त उदाहरण में, मल्टी टास्क foo लॉग करेगा : 1,2,3 यदि ग्रंट को ग्रन्ट लॉग के माध्यम से चलाया गया था : foo या यह बार लॉग करेगा : ग्रन्ट लॉग के माध्यम से जब भी रन करें, तो ट्यूटोरियलस्पोर्ट में आपका स्वागत है : बार । यह foo लॉग करेगा : 1,2,3 फिर बार: ट्यूटोरियल में आपका स्वागत है तब sap: सच जब ग्रंट लॉग लॉग के रूप में चलता है ।
मूल कार्य
जब भी आप एक मूल कार्य चलाते हैं, तो ग्रंट कॉन्फ़िगरेशन या वातावरण की खोज नहीं करेगा। इसके बजाय यह कार्य फ़ंक्शन को निर्दिष्ट करता है जो निर्दिष्ट है, फ़ंक्शन तर्क के रूप में निर्दिष्ट किसी भी औपनिवेशिक-पृथक तर्क को पारित करता है।
grunt.registerTask(taskName, [description, ] taskFunction)
निम्न उदाहरण में, कार्य foo लॉग करता है , 123 का परीक्षण अगर ग्रंट को ग्रन्ट फ़ू के माध्यम से निष्पादित किया जाता है : परीक्षण: 123 कमांड। जब भी कार्य को ग्रंट फ़ू के रूप में तर्क के बिना चलाया जाता है , तो कार्य फ़ू, लॉग नहीं होगा ।
grunt.registerTask('foo', 'A simple task to logs stuff.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln(this.name + ", no args");
} else {
grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
}
});
कस्टम कार्य
यदि आप बहु कार्य संरचना का पालन नहीं करना चाहते हैं , तो आप नीचे दिखाए गए अनुसार अपने कस्टम कार्य को परिभाषित कर सकते हैं -
grunt.registerTask('default', 'My "default" task description.', function() {
grunt.log.writeln('Currently running the "default" task.');
});
जैसा कि नीचे दिखाया गया है, किसी कार्य को दूसरे कार्य में चलाना संभव है -
grunt.registerTask('foo', 'My "foo" task.', function() {
// Enqueue bar and baz tasks, to run after foo completes, in-order.
grunt.task.run('bar', 'baz');
// Or:
grunt.task.run(['bar', 'baz']);
});
आप नीचे दिखाए अनुसार एसिंक्रोनस कार्य भी बना सकते हैं -
grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {
// Force task into async mode and grab a handle to the done() function.
var done = this.async();
// Run some sync stuff.
grunt.log.writeln('Processing your task..');
// Run some async stuff.
setTimeout(function() {
grunt.log.writeln('Finished!');
done();
}, 1000);
});
आप ऐसे कार्य बना सकते हैं जो नीचे दिखाए गए अनुसार उनके नाम और तर्कों तक पहुंच सकते हैं -
grunt.registerTask('foo', 'My task "foo" .', function(a, b) {
grunt.log.writeln(this.name, a, b);
});
// Usage:
// grunt foo
// logs: "foo", undefined, undefined
// grunt foo:bar
// logs: "foo", "bar", undefined
// grunt foo:bar:baz
// logs: "foo", "bar", "baz"
आप अपना कार्य इस तरह से बना सकते हैं कि, जब भी कोई त्रुटि लॉग की जाए, तो कार्य नीचे दिखाए अनुसार विफल हो सकते हैं -
grunt.registerTask('foo', 'My task "foo" .', function() {
if (failureOfSomeKind) {
grunt.log.error('This is an error message.');
}
// If this task had errors then fail by returning false
if (ifErrors) { return false; }
grunt.log.writeln('This is success message');
});
जब भी कोई काम विफल रहता है, हर निम्नलिखित कार्य समाप्त हो जाएगा, जब तक कि --force निर्दिष्ट किया गया था।
grunt.registerTask('foo', 'My task "foo" .', function() {
// Fail synchronously.
return false;
});
grunt.registerTask('bar', 'My task "bar" .', function() {
var done = this.async();
setTimeout(function() {
// Fail asynchronously.
done(false);
}, 1000);
});
सफल निष्पादन के लिए कार्य अन्य कार्यों पर निर्भर हो सकते हैं। याद रखें कि grunt.task.requires वास्तव में अन्य कार्य को निष्पादित नहीं करेगा, इसके बजाय यह केवल यह देखने के लिए जांच करेगा कि यह निष्पादित हुआ है या विफल नहीं हुआ है।
grunt.registerTask('foo', 'My task "foo" .', function() {
return false;
});
grunt.registerTask('bar', 'My task "bar" .', function() {
// Fail task if foo task failed or never ran.
grunt.task.requires('foo');
// This code executes if the foo task executed successfully.
grunt.log.writeln('Hello, World.. Welcome to Tutorialspoint!..');
});
// Usage:
// grunt foo bar doesn't log, because foo failed to execute.
// **Note: This is an example of space-separated sequential commands,
// (similar to executing two lines of code: `grunt foo` then `grunt bar`)
// grunt bar doesn't log, because foo never ran.
जब भी आवश्यक कॉन्फ़िगरेशन गुण नहीं मिलते हैं, तो कार्य विफल हो सकते हैं।
grunt.registerTask('foo', 'My task "foo" .', function() {
// Fail task if meta.name config properties is missing
// Format 1: String
grunt.config.requires('meta.name');
// or Format 2: Array
grunt.config.requires(['meta', 'name']);
// Log... conditionally.
grunt.log.writeln('This only log if meta.name is defined in the config.');
});
कार्य विन्यास गुण को नीचे दिखाए अनुसार उपयोग कर सकते हैं -
grunt.registerTask('foo', 'My task "foo" .', function() {
// Log the value of the property. Returns null if the property is undefined.
grunt.log.writeln('The meta.name property is: ' + grunt.config('meta.name'));
// Also logs the value of the property. Returns null if the property is undefined.
grunt.log.writeln('The meta.name property is: ' + grunt.config(['meta', 'name']));
});