ग्रंट - नमूना फ़ाइल
इस अध्याय में, हम निम्नलिखित प्लगइन्स का उपयोग करके एक सरल ग्रन्ट फ़ाइल बनाते हैं -
- 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']);
};