ग्रंट - शुरुआत करना

ग्रंट का उपयोग करने के लिए, आपको Node.js स्थापित करना होगा। Node.js की स्थापना पिछले अध्याय में बताई गई है । आप Node.js पैकेज मैनेजर का उपयोग करके ग्रंट और ग्रंट प्लग इन स्थापित कर सकते हैं।

सिस्टम पर ग्रंट स्थापित करने से पहले, आप निम्नलिखित कमांड का उपयोग करके नोड पैकेज प्रबंधक को अपडेट कर सकते हैं -

npm update -g npm

यदि आप मैक या लिनक्स का उपयोग कर रहे हैं, तो आपको प्रशासक पहुंच प्रदान करने के लिए कमांड लाइन की शुरुआत में sudo शब्द का उपयोग करने की आवश्यकता है जैसा कि नीचे दिखाया गया है -

sudo npm update -g npm

सीएलआई स्थापना

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

npm install -g grunt-cli

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

सीएलआई का कार्य करना

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

एक मौजूदा और नई परियोजना के साथ काम करना

आप एक पहले से ही कॉन्फ़िगर परियोजना है कि शामिल है के साथ काम कर रहे हैं, तो package.json और Gruntfile , तो सरल कदम नीचे निर्दिष्ट है का पालन करें -

प्रोजेक्ट की रूट डायरेक्टरी के लिए रास्ता खोजें।
आप npm स्थापित कमांड का उपयोग करके निर्भरता स्थापित कर सकते हैं ।
भागो ग्रंट का उपयोग कर घुरघुराना आदेश।

यदि आप एक नई परियोजना बना रहे हैं, तो अपनी परियोजना के लिए दो फाइलें पैकेज। जसन और ग्रंटफाइल शामिल करें।

package.json- package.json फ़ाइल को प्रोजेक्ट के रूट डायरेक्टरी में रखा जाता है और जब भी आप कमांड npm को एक ही फोल्डर में स्थापित करते हैं, तब इसे प्रत्येक सूचीबद्ध निर्भरता को चलाने के लिए उपयोग किया जाता है ।
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 () फ़ंक्शन के अंदर , package.json फ़ाइल से कॉन्फ़िगरेशन जानकारी लें और इसे pkg में सहेजें । आप का उपयोग कर अपने प्रोजेक्ट के नाम पर कॉल कर सकते pkg.name साथ और संस्करण pkg.version ।

ग्रंट प्लगइन्स और कार्य लोड हो रहे हैं

Grunt.loadNpmTasks विधि का उपयोग करके किसी निर्दिष्ट प्लगइन से कार्यों को लोड करें । आप स्थानीय रूप से प्लगइन का उपयोग करके स्थापित कर सकते हैंnpmऔर यह ग्रंटफाइल के सापेक्ष होना चाहिए। आप नीचे दिखाए गए अनुसार एक साधारण कमांड से प्लगइन लोड कर सकते हैं -

grunt.task.loadNpmTasks(pluginName)

कस्टम कार्य

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

grunt.registerTask('default', ['uglify']);