উত্তর:
এটি করে এমন একটি অ্যাপ্লিকেশন / প্লাগইন হ'ল লাইভরেলোড ।
লাইভরেলোড ফাইল সিস্টেমে পরিবর্তনগুলি পর্যবেক্ষণ করে। আপনি কোনও ফাইল সংরক্ষণ করার সাথে সাথে এটি প্রয়োজনীয়তা হিসাবে প্রেরোসেস করা হয় এবং ব্রাউজারটি রিফ্রেশ হয়। এমনকি শীতল, আপনি যখন কোনও সিএসএস ফাইল বা কোনও চিত্র পরিবর্তন করেন, পৃষ্ঠাটি পুনরায় লোড না করেই ব্রাউজারটি তাত্ক্ষণিকভাবে আপডেট হয়ে যায়।
তবে সেই অ্যাপ / প্লাগইনটি কিছুক্ষণের মধ্যে আপডেট হয়নি।
gruntএবং একটি লাইভ পুনরায় লোড সার্ভারপরিবর্তে আপনি যা করতে পারেন তা হ'ল একটি সার্ভার চালানো, যেমন grunt-contrib-connectএবং একটি প্লাগইন যা ফাইল পরিবর্তনের জন্য নজর রাখে, যেমন grunt-contrib-watch। সার্ভারটি আপনার HTML পৃষ্ঠায় জাভাস্ক্রিপ্ট সংক্রামিত করেছে যাতে দেখা ফাইলগুলিতে পরিবর্তনগুলি ওয়েবসাইটের পুনরায় লোডকে ট্রিগার করে।
প্রথমে নোড.জেএস ইনস্টল করুন এবং তারপরে কমান্ড-লাইন থেকে আপনার প্রকল্প ফোল্ডারে (যেখানে এইচটিএমএল ফাইল রয়েছে) যান এবং চালান:
npm install grunt grunt-contrib-watch grunt-contrib-connect --save-dev
নামক একটি ফাইল তৈরি Gruntfile.jsকরুন এবং নিম্নলিখিত সামগ্রীগুলি যুক্ত করুন:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
files: ['**/*'],
options: {
livereload: true,
},
},
connect: {
server: {
options: {
livereload: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect:server', 'watch']);
};
এটি সংরক্ষণ করুন এবং নিম্নলিখিত কমান্ডটি চালান:
grunt
এখন http://localhost:8000/এটিতে নেভিগেট করুন - সম্পদগুলি যখন পরিবর্তন হবে তখন আপনার HTML এর পুনরায় লোডকে ট্রিগার করবে।
কটাক্ষপাত আছে grunt-contrib-connectএবং grunt-contrib-watchআরো কনফিগারেশন অপশন জন্য ডকুমেন্টেশন।
আপনি যখন নোটপ্যাড ++ এ আপনার ফাইল সম্পাদনা করছেন তখন আপনার পরিবর্তনের পরে সংরক্ষণ করতে cntrl এস টিপুন।
(অনেকগুলি উপলভ্য রয়েছে) এবং টাইমারটি 1 সেকেন্ডে সেট করে।
এখন যখনই আপনি আপনার পরিবর্তনগুলি ওয়েব ব্রাউজারটি সংরক্ষণ করতে cntrl এস টিপুন, আপনি যে কোনও বিরতি সেট করেছেন তা রিফ্রেশ করলে আপনার সর্বশেষ সংরক্ষিত পরিবর্তনগুলি আবারও লোড হবে।
এই ফায়ারফক্স অ্যাডন সিএসএস ফাইলগুলি পরিবর্তনের জন্য পর্যবেক্ষণ করে এবং সিএসএস ফাইল পরিবর্তন করা হলে এইচটিএমএল পুনরায় লোড না করে ফাইলটিকে পুনরায় লোড করে । এই সংযোজনটির জন্য আপনার সম্পাদকের জন্য প্লাগইন প্রয়োজন নেই।
দাবি অস্বীকার: আমি এই সংযোজনটির লেখক এবং ওপি যে একই সমস্যার মুখোমুখি হয়েছিল তা সমাধান করার জন্য আমি এটি তৈরি করেছি।
আপনার gulp.jsফাইলটিতে এই কোডটি যুক্ত করুন
এই রেপোটি https://github.com/Anasmp/html-debugger- বাস্তব সময় পরীক্ষা করুন check
gulp.task('serve', function() {
bs.init({
server: {
baseDir: "./src"
}
});
gulp.watch("src/*.html").on("change", bs.reload);
gulp.watch("src/*.css").on("change", bs.reload);
});
এটা সম্ভব হলে আমি অবাক হব। সাধারণত কোনও সম্পাদকের পরিবর্তে এইচটিএমএল ফাইল বা জাভাস্ক্রিপ্ট কোড দিয়ে স্বয়ংক্রিয়ভাবে রিফ্রেশ করা হবে।
ফায়ারফক্স স্বয়ংক্রিয়ভাবে রিফ্রেশ হওয়া এইচটিএমএল সম্পাদকের সাথে করার দরকার নেই।
আপনি যদি ওয়েবপৃষ্ঠাগুলি তৈরির জন্য একটি ডাব্লুওয়াইএসআইওয়াইজি (আপনি যা দেখেন তা) প্রোগ্রামটি অ্যাডোব ড্রিমউইভার ব্যবহার করেন y আপনি প্রোগ্রামটিতে নকশা উইন্ডোতে যে HTML HTML কোডটি লিখছেন তার ফলাফল দেখতে পাবেন। উইন্ডো রিফ্রেশ করার প্রয়োজন ছাড়া।