ग्रंट - नमूना फ़ाइल

इस अध्याय में, हम निम्नलिखित प्लगइन्स का उपयोग करके एक सरल ग्रन्ट फ़ाइल बनाते हैं -

  • 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 / फोल्डर के तहत concatenated .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']);

};