Node.js पर LiveReload

यह क्या है

LiveReload एक उपयोगिता है जो आपको सर्वर पर अपना कोड और संसाधन (html, css, js, images इत्यादि) बदलते समय स्वचालित रूप से एक पृष्ठ को फिर से लोड करने की अनुमति देता है। इसके अलावा, LiveReload आपको पृष्ठ को फिर से लोड किए बिना सीएसएस और जावास्क्रिप्ट में परिवर्तन लागू करने की अनुमति देता है।

इसकी आवश्यकता क्यों है?

आवेदन के ग्राहक भाग को विकसित करने की सुविधा के लिए और अधिक नहीं। उपयोगिता के आधिकारिक पृष्ठ पर लिखा गया है:

वेब डेवलपर वंडरलैंड (एक खुश भूमि जहां ब्राउज़र को रीफ़्रेश बटन की आवश्यकता नहीं है)

यह कैसे काम करता है?

सिद्धांत बहुत सरल है, उपयोगिता में एक सर्वर और एक ग्राहक शामिल हैं:

1. सर्वर: वेबसॉकेट जो निर्दिष्ट फाइलों में बदलावों की निगरानी करता है और यदि ऐसे परिवर्तनों का पता लगाया जाता है, तो क्लाइंट को सूचित करता है
2. ग्राहक, कई विकल्प हैं:
   
   • एक ब्राउज़र ऐड-ऑन उस पृष्ठ को ताज़ा करता है।
   • जावास्क्रिप्ट स्निपेट जो वेबस्केट सर्वर को सुनता है और यदि आवश्यक हो तो पृष्ठ को ताज़ा करता है। इसे आपकी HTML फ़ाइलों में डाला जाना चाहिए।
   
   

Node.js, हुह?

यदि आप पहले से ही Node.js या Grunt.js का उपयोग कर रहे हैं, या आप चाहते हैं कि एक LiveReload विधि बिना किसी परिवर्तन के सभी प्लेटफार्मों पर काम करे (LiveReload को Windows और Linux और MacOS X दोनों पर कॉन्फ़िगर किया जा सकता है, लेकिन कॉन्फ़िगरेशन विधि हर जगह अलग है) तो आप उपयोग कर सकते हैं घुरघुराना-पुनः लोड।
तो यहाँ आप की जरूरत है:

1. Node.js. उदाहरण के लिए, Ubunt पर, इसे डालें:
   

   sudo apt-get install nodejs npm 

   
   
2. Grunt.js
   

     sudo npm install -g grunt 

   
   
3. ग्रन्ट प्लगइन ग्रन्ट-रीलोड
   

     npm install grunt-reload --save-dev 

   
   

पहले से ही वर्णित दो लिवरेलड विधियों के अलावा, ग्रंट-रीलोड प्लगइन में कुछ और विकल्प हैं:

1. प्रॉक्सी: एक सर्वर बनाता है जो प्रॉक्सी को देव के लिए अनुरोध करेगा। सर्वर HTML स्निपेट को लिवरेलड HTML फ़ाइलों में जोड़ता है। लीवरोलैड का समर्थन करने के लिए HTML को मैन्युअल रूप से अपडेट करने की आवश्यकता को समाप्त करता है।
2. iFrame: पिछली पद्धति के समान, केवल स्वचालित रूप से स्निपेट जोड़ने के बजाय, यह एक iFrame में पृष्ठ खोलता है, जो आवश्यक होने पर उन्हें पुनः लोड करता है। और आपका html साफ रहेगा !;;

दुर्भाग्य से, ग्रंट-रीलोड पूरे पृष्ठ को फिर से लोड किए बिना सीएसएस और जेएस का समर्थन नहीं करता है। अधिक सटीक रूप से, यह समर्थन करता है, लेकिन केवल LiveReload ब्राउज़र एक्सटेंशन का उपयोग कर रहा है।

कैसे उपयोग करें

हम एक प्रोजेक्ट बनाते हैं, रूट में grunt.js बनाते हैं और वॉच टास्क को कॉन्फ़िगर करते हैं (यह फाइलों में बदलावों की निगरानी करेगा) और फिर से लोड करने का कार्य (हम फाइल बदलते समय लिवरेलैड बनाते हैं)।

उदाहरण के लिए, हमारे पास इस तरह की एक एक्सप्रेस .js परियोजना है:
/ सार्वजनिक - स्टेटिक्स (सीएसएस, चित्र, जेएस, टेम्प्लेट, आदि)
app.js - express.js आवेदन
grunt.js - ग्रंटफाइल

grunt.js इस तरह दिखता है:

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-bg-shell'); //  grunt-reload grunt.loadNpmTasks('grunt-reload'); // Project configuration. grunt.initConfig({ bgShell: { //    supervisor'a //     //   supervisor: { cmd: 'supervisor app.js', stdout: true, stderr: true, bg: true } }, // reload //    localhost:3000 //  localhost:6001        LiveReload reload: { port: 6001, proxy: { host: 'localhost', port: 3000 }, }, watch: { //        'reload' files: [ //add here static file which need to be livereloaded 'public/styles/**/*.css', 'public/scripts/**/*.js', 'public/images/**/*', ], tasks: 'reload' } }); //  //reload       grunt.registerTask('server', 'bgShell:supervisor reload watch'); }; 

अब एप्लिकेशन की रूट डायरेक्टरी से आप कमांड चला सकते हैं

 grunt server 

और स्थानीयहोस्ट पर क्लाइंट पर स्वचालित रूप से पुनरारंभ सर्वर और LiveReload प्राप्त करें: 6001

यह ग्रंटफाइल पर्यवेक्षक पैकेज (सर्वर की निगरानी के लिए) और पृष्ठभूमि में पर्यवेक्षक को चलाने के लिए ग्रन्ट-बीजी-शेल पैकेज का भी उपयोग करता है

  sudo npm install -g supervisor npm install grunt-bg-shell --save-dev