ग्रंटज के साथ अनुभव

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

परियोजना के बारे में थोड़ा सा

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

तकनीकी रूप से, हमने एक प्रोटोटाइप बनाया - हमने विभिन्न तकनीकों का सक्रिय रूप से अध्ययन किया और लागू किया। कुछ के साथ, यह शांत हो गया, कुछ के साथ नहीं। जैसा कि यह हो सकता है, किताब काम करती है और यहां तक ​​कि ऐप स्टोर से भी डाउनलोड किया जा सकता है।

मुझे लगता है कि यह पर्याप्त है। अब आप GruntJS जा सकते हैं ...

ब्रेन ग्रंट

- मेरे पास दो चर हैं, मैं उन्हें कैसे जोड़ सकता हूं?
- मैं प्लगइन डाल "jquery.math", बहुत सुविधाजनक!

मैं आपको थोड़ा अतिरंजित, लेकिन शिक्षाप्रद कहानी सुनाता हूँ। हमारी परियोजना में मुख्य ग्राफिक्स प्रारूप पारदर्शिता के साथ PNG24 था। परियोजना ने लगभग 500 एमबी पर कब्जा कर लिया। हमने इसे ऑप्टिमाइज़ करने का फैसला किया। बेशक, GruntJS के लिए प्लगइन का उपयोग कर ...

कोई नतीजा नहीं निकला। 500MB किसी भी ढांचे में फिट नहीं हुआ। मुश्किल से 450Mb तक संपीड़ित। परिणामस्वरूप, कई दिनों की खोज के बाद, उन्होंने 250MB गिरा दिया। इस तरह:

find . -name "*.png" | xargs pngquant -f -v --ext .png --quality 0-90 

GruntJS कमाल है, लेकिन नशे की लत है। बेशक, यह कहानी थोड़ी अतिरंजित है, लेकिन मैंने वास्तव में देखा कि लोग ऐसी चीजें कैसे करते हैं। JQuery के लिए प्लगइन्स याद दिलाता है। फिर भी, कभी-कभी बैश पर एक-लाइनर द्वारा प्राप्त करना आसान होता है, या कंसोल-सिद्ध उपयोगिताओं को कनेक्ट करना जो समय-परीक्षण होते हैं।

सामान्य तौर पर, आप बंट स्क्रिप्ट और कमांड को ग्रंट के माध्यम से निष्पादित कर सकते हैं। इसके लिए एक ग्रंट-शेल है ।

 grunt.initConfig({ shell: { compressPNG: { options: { stdout: true }, command: 'find . -name "*.png" | xargs pngquant -f -v --ext .png --quality 0-90' } } }); grunt.loadNpmTasks('grunt-shell'); grunt.registerTask('compress', ['shell: compressPNG']); 

Gruntfile.js के लिए कॉन्फ़िगर करें

हमारी परियोजना में, Gruntfile.js में कोड की लगभग 200 लाइनें शामिल थीं, जहां तर्क और पैरामीटर मिश्रित थे। हमने ग्रंटफाइल के लिए एक अलग कॉन्फ़िगरेशन बनाने का फैसला किया। इस उद्देश्य के लिए मेरी परियोजना में मैंने एक config.json फ़ाइल बनाई है जिसमें मैं संग्रहीत करता हूं:

• स्रोत निर्देशिका
• तैनाती के लिए निर्देशिका
• टेम्पलेट इंजन के लिए चर (उदाहरण के लिए, पुस्तक का नाम)
• सूची पर ध्यान न दें (वे फाइलें जो तैनाती में नहीं आती हैं)
• कम फ़ाइल सूची और गंतव्य फ़ाइल
• जेएस फ़ाइल सूची और लक्ष्य फ़ाइल
• परीक्षण के लिए सर्वर पर तैनात करने के लिए पैरामीटर

इसके कई फायदे हैं। सबसे पहले, फ़ाइलों को जोड़ना बहुत आसान हो जाता है, और दूसरी बात, कॉन्फ़िगर के छोटे बदलावों को ग्रंट के साथ पूरी तरह अपरिचित व्यक्ति द्वारा किया जा सकता है। खैर, तीसरे में, तर्क मापदंडों के साथ मिश्रण नहीं करता है।

विन्यास इस तरह दिखता है:

 { "src": "_src", "dst": "www", "port": 8000, "variables": { "bookname": "  "}, "ignore": [ "**/*.ect", "**/*.md", "**/*.less"], "less": { "www/app/assets/css/app.min.css": ["_src/app/assets/less/main.less"], "www/content/assets/css/content.min.css": ["_src/content/assets/less/main.less","_src/content/widgets/**/widget.less"] } }, "js": { "www/app/assets/js/app.min.js": [ "_src/app/assets/js/utilities.js", "_src/app/assets/js/modules/*.js", "_src/app/assets/js/setups/*.js", "_src/content/widgets/**/*.js" "_src/app/assets/js/init.js", ] } } 

ग्रंटफाइल उदाहरण

 module.exports = function (grunt) { //  config.json var config = grunt.file.readJSON('config.json') || grunt.fatal('config.json not found'); //     - config.ignore = getIgnorePatterns(config); var tasks = { clean: { dst: path.join(config.dst, '**/*'), ignore: config.ignore }, livereload: {…}, regarde: {…}, copy: {…}, ect: {…}, less: {…}, uglify: {…}, rsync: {…} }; grunt.initConfig(tasks); grunt.registerTask('lvrld', ['livereload-start', 'connect', 'regarde']); grunt.registerTask('main', ['clean:dst', 'copy:main', 'clean:ignore','uglify:main', 'ect', 'less:browser']); grunt.registerTask('browser', ['main', 'lvrld']); grunt.registerTask('phonegap', ['clean:dst', 'copy:main', 'clean:ignore', 'uglify:main', 'less:phonegap', 'ect']); grunt.registerTask('deploy', ['main', 'rsync:deploy']); grunt.registerTask('default', ['browser']); require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); }; 

उपकरणों पर सुविधाजनक डिबगिंग

आईपैड और मैकबुक की एक जोड़ी पर डिबगिंग कोड बहुत असुविधाजनक है। आपको अपने हाथों से पेज को लगातार रिफ्रेश करना होगा। यह भयानक है।

ग्रंट यहां मदद कर सकते हैं। यदि आप ग्रंट-कॉन्ट्री-वॉच चलाते हैं, लिवरेलॉड को कॉन्फ़िगर करते हैं, और सभी डिवाइसों को आईपी से कनेक्ट करते हैं, तो जब आप कोड बदलते हैं, तो सभी गैजेट पृष्ठ को स्वयं लोड करेंगे। यह कमाल है! गंभीरता से, यदि आप लगातार तीन उपकरणों पर भी पृष्ठ को फिर से लोड करते हैं, तो एक घंटे में मैं सब कुछ चिप्स में तोड़ना चाहता हूं।

सामान्य तौर पर, एक समस्या है। हमारी परियोजना में अपेक्षाकृत कई फाइलें हैं। लगभग एक हजार 2. तो, यदि आप अलग-अलग लिवरेलॉड्स (निश्चित रूप से अलग-अलग कार्यों के साथ) को कवर करते हैं, तो नोडज गिरना शुरू हो जाता है। हमें पूर्ण कवरेज से इनकार करना होगा। हम चाकू की तस्वीरों के नीचे गए।

एक प्लगइन लेखन

सामान्य तौर पर, मैंने खाका इंजन को बहुत सरलता से चुना - मैंने लेआउट और भाग के साथ पहला लिया। पहला ECTJS निकला। अब मैं जेड ले जाऊंगा, लेकिन फिर मैंने इसे ले लिया। टेम्पलेट इंजन के लिए एक उपयुक्त प्लगइन नहीं ढूंढने पर, मैंने अपना खुद का लिखने का फैसला किया।

सामान्य तौर पर, gruntjs के लिए एक प्लगइन लिखना काफी सरल है। लगभग हर चीज की जरूरत हो सकती है जो निर्देशों में लिखी गई है। सामान्य तौर पर, एल्गोरिथ्म इस प्रकार है:

1. grunt-init gruntplugin एक परियोजना संरचना बनाएगा
2. हम कोड लिखते हैं, मॉड्यूल कनेक्ट करते हैं ...
3. जब आवश्यक हो - GruntJS एपीआई में झांकना

---

सामान्य तौर पर, यह सब मैं साझा करना चाहता था।