ग्रन्ट के लिए प्रवास v0.4

प्रस्तावना

18 फरवरी को, ग्रंट v0.4.0 जारी किया गया था , और मैं इस पर सभी को बधाई देता हूं। यदि आप अभी तक ग्रांट से परिचित नहीं हैं, तो कृपया आधिकारिक वेबसाइट पर जाएं या हैबे पर एक तथ्य-खोज लेख पढ़ें। संक्षेप में, ग्रांट आपको जेएस फाइलों के बॉन्डिंग और मिनिफिकेशन को स्वचालित करने की अनुमति देता है, परीक्षण चला रहा है, जेएसहिंट का उपयोग कर कोड की जाँच कर रहा है, और बहुत कुछ ।

यह आलेख अनुदान v0.3.9 से जारी v0.4.0 तक एक आवेदन के प्रवास का इतिहास है। संस्करण असंगत हैं और चलना उतना आसान नहीं था जितना कि मूल रूप से मेरा इरादा था। अंग्रेजी में पूर्ण प्रवास निर्देश यहाँ हैं , यह मेरे विवरण से अधिक विस्तृत है।

मैं ग्रंट का उपयोग क्यों कर रहा हूं

किसी भी आलसी सामने वाले डेवलपर की तरह, मुझे एक उपकरण की आवश्यकता थी जो नियमित कार्यों को स्वचालित करता है, जिससे मुझे सीधे विकास पर ध्यान केंद्रित करने की अनुमति मिलती है। तो मुझे एक ग्रांट मिली जिसने मेरे लिए निम्नलिखित कार्य किया:

• सीएसएस में स्टाइलस का संकलन;
• gluing जेएस फाइलें;
• लिंटर द्वारा जावास्क्रिप्ट चेक;
• सरेस से जोड़ा हुआ जेएस-फाइलों का खनन;
• लॉन्च यूनिट परीक्षण ( qUnit );
• स्रोत फ़ाइलों में परिवर्तन को ट्रैक करना और उपरोक्त कार्यों को स्वचालित रूप से पुनरारंभ करना।

एक टीम द्वारा ये सभी महत्वपूर्ण लेकिन उबाऊ कार्य किए गए थे:

→ grunt Running "stylus:compile" (stylus) task File 'css/styles.css' created. Running "concat:js" (concat) task File "project.js" created. Running "lint:files" (lint) task Lint free. Running "min:js" (min) task File "project.min.js" created. Uncompressed size: 130468 bytes. Compressed size: 20937 bytes gzipped (74246 bytes minified). Running "qunit:all" (qunit) task Testing index.html...............OK >> 95 assertions passed (594ms) Running "watch" task Waiting... 

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

 module.exports = function(grunt) { grunt.initConfig({ stylus: { //  Stylus  CSS compile: { options: { 'compress': true, 'paths': ['css/styl/'] }, files: { 'css/styles.css': 'css/styles.styl' } } }, concat: { //  js- js: { src: [ /*     */ ], dest: 'project.js' } }, min: { //  js: { src: ['<config:concat.js.dest>'], dest: 'project.min.js' } }, jshint: { options: { smarttabs: true } }, lint: { //   files: ['<config:concat.js.dest>'] }, watch: { //     styl- stylus: { files: ['css/styl/*.styl'], tasks: 'stylus' }, //     lint    js- js: { files: ['src/*.js'], tasks: 'concat lint' } }, qunit: { //   qUnit- all: ['../test/index.html'] } }); //      grunt.loadNpmTasks('grunt-stylus'); //   grunt.registerTask('default', 'stylus concat:js lint min:js qunit watch'); grunt.registerTask('test', 'qunit'); }; 

मैं इसे विस्तार से नहीं बताऊंगा, कोड में पर्याप्त टिप्पणियां होनी चाहिए।

प्रवास

मॉड्यूल को पुनर्स्थापित करें

पहले से स्थापित वैश्विक रूप से ग्रंट मॉड्यूल (यदि कोई हो) को npm uninstall -g grunt : npm uninstall -g grunt

और ग्रांट कमांड लाइन इंटरफ़ेस मॉड्यूल npm install -g grunt-cli : npm install -g grunt-cli

ग्रंट स्वयं प्रोजेक्ट फ़ोल्डर में अब स्थानीय रूप से npm install grunt : npm install grunt

मॉड्यूल के संस्करणों की जाँच करें:

 → grunt --version grunt-cli v0.1.6 grunt v0.4.0 

इसे वैश्विक रूप से ग्रंट-इनिट मॉड्यूल स्थापित करने की अनुमति है, लेकिन इसका उपयोग मेरे आवेदन में नहीं किया गया है।

स्थापित करने से पहले, सुनिश्चित करें कि node.js> = 0.8.0 का संस्करण।

अनुदान फ़ाइल का नाम बदलें

 mv grunt.js Gruntfile.js 

पुराने नाम वाली अनुदान फ़ाइल अब समर्थित नहीं है, बिना नाम बदले हम एक त्रुटि देखेंगे:

Fatal error: Unable to find Gruntfile.

नए संस्करण में, अनुदान फ़ाइल को CoffeeScript : Gruntfile.cfish में लिखा जा सकता है।

प्लगइन स्थापना

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

• concat → ग्रंट-कॉन्ट्रिब-कॉन्सैट
• लिंट → ग्रंट-कंट्रीब-जिश्ट
• न्यूनतम → ग्रंट-कंट्रीब-कुरूप
• क्यूनिट → ग्रंट-कंट्रीब-क्यूनिट
• वॉच → ग्रंट-कंट्रीब-वॉच

यह देखना आसान है कि ग्रांट प्लगइन्स ग्रंट-कंट्रीब के साथ उपसर्ग कर रहे हैं-
सेट करें:

 → npm install grunt-contrib-concat → npm install grunt-contrib-jshint → npm install grunt-contrib-uglify → npm install grunt-contrib-qunit → npm install grunt-contrib-watch → npm install grunt-contrib-stylus 

स्थापित करते समय, यह अनुशंसा की जाती है कि आप --save-dev विकल्प का उपयोग करें ताकि पैकेज में स्थित निर्भरताएँ निर्भर हो जाएँ। स्वचालित रूप से अद्यतन किया गया है।

हम अनुदान फ़ाइल में प्लगइन्स कनेक्ट करते हैं:

 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-stylus'); 

ग्रांट फाइल में बदलाव

रजिस्टरटैस्क विधि अब विभाजक स्थानों के साथ एक पंक्ति में कार्यों की सूची को पारित नहीं कर सकती है। एक पंक्ति को केवल एक कार्य पास करने की अनुमति है: grunt.registerTask('test', 'qunit');

कार्यों की सूची के लिए, हम निश्चित रूप से एक सरणी का उपयोग करते हैं:

 grunt.registerTask('default', ['stylus', 'concat:js', 'jshint', 'min:js', 'qunit', 'watch']); 

प्रपत्र के निर्देशों के बजाय <config:concat.js.dest> अब <config:concat.js.dest> टेम्प्लेट का उपयोग करते हैं: <%= concat.js.dest %> ।

Jshint विकल्पों के साथ लिंट कार्य अब jshint कार्य में एकीकृत किया गया है, जहाँ आप तुरंत विकल्प निर्दिष्ट कर सकते हैं:

 jshint: { options: { smarttabs: true }, js: ['project.js'] } 

बदसूरत करने के लिए मिनट कार्य का नाम बदलें। Src / dest ऑब्जेक्ट्स के बजाय, हम फ़ाइलों ऑब्जेक्ट का उपयोग करते हैं:

 uglify: { js: { files: { 'project.min.js': ['<%= concat.js.dest %>'] } } } 

घड़ी के कार्य में, हम एक सरणी के रूप में किए जाने वाले कार्यों को सूचीबद्ध करते हैं:

 watch: { js: { files: ['src/*.js'], tasks: ['concat', 'lint'] } } 

इस पर मेरा कदम पूरा हो गया, और ग्रांट ने त्रुटियों के बिना काम किया। अनुदान फ़ाइल में सभी परिवर्तन इस टेम्पलेट में एकत्र किए गए हैं:

 module.exports = function(grunt) { grunt.initConfig({ //  Stylus  CSS stylus: { compile: { options: { 'compress': true, 'paths': ['css/styl/'] }, files: { 'css/styles.css': 'css/styles.styl' } } }, concat: { //  js- js: { src: [ /*     */ ], dest: 'project.js' } }, uglify: { //  js: { files: { 'project.min.js': ['<%= concat.js.dest %>'] } } }, jshint: { //   options: { smarttabs: true }, js: ['<%= concat.js.dest %>'] }, watch: { //     styl- stylus: { files: ['css/styl/*.styl'], tasks: 'stylus' }, //     lint    js- js: { files: ['src/*.js'], tasks: ['concat', 'lint'] } }, qunit: { //   qUnit- all: ['../test/index.html'] } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-stylus'); //   grunt.registerTask('default', ['stylus', 'concat:js', 'jshint', 'uglify:js', 'qunit', 'watch']); grunt.registerTask('test', 'qunit'); }; 

संबंधित सामग्री

• उन्नयन 0.3 से 0.4 तक
• ग्रन्ट 0.4: फ्रंट-एंड डेवलपर्स के लिए बिल्ड सिस्टम