আমি ভিমে একটি এইচটিএমএল ফাইল সম্পাদনা করছি এবং আমি চাই যখনই নীচের ফাইলটি পরিবর্তন হয় ব্রাউজারটি রিফ্রেশ হয়।
গুগল ক্রোমের জন্য কি এমন কোনও প্লাগইন রয়েছে যা ফাইলের পরিবর্তনের জন্য শুনবে এবং প্রতিবার যখনই আমি ফাইলে কোনও পরিবর্তন সংরক্ষণ করব তখন পৃষ্ঠাটি অটো রিফ্রেশ করবে? আমি জানি ফায়ারফক্সের জন্য এক্সরেফ্রেস আছে তবে আমি এক্সরেফ্রেস মোটেও চালাতে পারিনি।
এটি নিজে করার জন্য কোনও স্ক্রিপ্ট লিখতে কত কষ্ট হবে?
উত্তর:
আমি ধরে নিলাম আপনি ওএসএক্সে নেই? অন্যথায় আপনি আপেলসক্রিপ্ট দিয়ে এরকম কিছু করতে পারেন:
http://brettterpstra.com/watch-for-file-changes-and-refresh-your- ব্রাউজার- স্বয়ংক্রিয়ভাবে /
Chrome এর জন্য "অটো রিফ্রেশ প্লাস" নামে একটি প্লাগইন রয়েছে যেখানে আপনি প্রতি x সেকেন্ডে একটি পুনরায় লোড নির্দিষ্ট করতে পারেন:
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en
keywordকরতে watch_keywordনিম্নলিখিত লাইন:if (URL of atab contains "#{keyword}") then
খাঁটি জাভাস্ক্রিপ্ট সমাধান!
কেবলমাত্র আপনারটিতে নিম্নলিখিতগুলি যুক্ত করুন <head>:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
কীভাবে? কেবলমাত্র Live.js অন্তর্ভুক্ত করুন এবং এটি সার্ভারে একটানা হেড অনুরোধ পাঠিয়ে স্থানীয় সিএসএস এবং জাভাস্ক্রিপ্ট সহ বর্তমান পৃষ্ঠা পর্যবেক্ষণ করবে। সিএসএসে পরিবর্তনগুলি গতিশীলভাবে প্রয়োগ করা হবে এবং এইচটিএমএল বা জাভাস্ক্রিপ্ট পরিবর্তনগুলি পৃষ্ঠাটি পুনরায় লোড করবে। চেষ্টা করে দেখুন!
কোথায়? Live.js ফায়ারফক্স, ক্রোম, সাফারি, অপেরা এবং আই 6+ এ অন্যথায় প্রমাণিত হওয়া অবধি কাজ করে। লাইভ.জেএস আপনি যে বিকাশ কাঠামো বা ভাষা ব্যবহার করেন তার থেকে পৃথক, তা সে রুবি, হ্যান্ডক্রাফট, পাইথন, জ্যাঙ্গো, নেট, জাভা, পিএইচপি, দ্রুপাল, জুমলা বা আপনার কী আছে।
আমি এই উত্তরটি এখানে প্রায় কথায় কথায় অনুলিপি করেছি , কারণ আমার কাছে মনে হয় এটি বর্তমানে গৃহীত উত্তরের চেয়ে সহজ এবং সাধারণ।
php -S localhost:8080
python3 -m http.server, সেইসাথে অন্যান্য ভাষায় / টুলস জন্য আরো অনেক ।
আপডেট : টিনকর মারা গেছে।
টিনক্র হ'ল একটি ক্রোম এক্সটেনশন যা যখনই নীচে ফাইলটি পরিবর্তন করবে তখন পৃষ্ঠাটি রিফ্রেশ করবে।
আপনি fswatch ( brew install fswatch) ইনস্টল করেছেন তা ধরে নিয়ে OS OS এর জন্য হ্যান্ডি বাশ ওয়ান-লাইনার । এটি একটি স্বেচ্ছাচারী পথ / ফাইল দেখায় এবং পরিবর্তনগুলি উপস্থিত থাকলে সক্রিয় ক্রোম ট্যাবটিকে রিফ্রেশ করে:
fswatch -o ~/path/to/watch | xargs -n1 -I {} osascript -e 'tell application "Google Chrome" to tell the active tab of its first window to reload'
এখানে fswatch সম্পর্কে আরও দেখুন: https://stackoverflow.com/a/13807906/3510611
আপনার দস্তাবেজে একটি একক মেটা ট্যাগ যুক্ত করার সাথে সাথে আপনি ব্রাউজারটিকে প্রদত্ত বিরতিতে স্বয়ংক্রিয়ভাবে পুনরায় লোড করতে নির্দেশ দিতে পারেন:
<meta http-equiv="refresh" content="3" >
আপনার দস্তাবেজের প্রধান ট্যাগের মধ্যে স্থাপন করা, এই মেটা ট্যাগটি ব্রাউজারকে প্রতি তিন সেকেন্ডে রিফ্রেশ করার নির্দেশ দেয়।
http://livereload.com/ - ওএস এক্স এর জন্য নেটিভ অ্যাপ্লিকেশন, উইন্ডোজের জন্য আলফা সংস্করণ। Https://github.com/livereload/LiveReload2 এ সর্বাধিক উত্সাহিত
ব্যবহার করুন Gulp ফাইল এবং দেখার জন্য Browsersync ব্রাউজার পুনরায় লোড করার।
পদক্ষেপগুলি হ'ল:
কমান্ড লাইনে এক্সিকিউট করুন
এনপিএম ইনস্টল করুন - সেভ-ডেভ গল্প ব্রাউজার-সিঙ্ক
নিম্নলিখিত বিষয়বস্তু সহ gulpfile.js তৈরি করুন :
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("*.html").on("change", reload);
});
চালান
গোলাপ পরিবেশন
এইচটিএমএল সম্পাদনা করুন, সংরক্ষণ করুন এবং আপনার ব্রাউজার পুনরায় লোড দেখুন। যাদুটি আপনার এইচটিএমএল ফাইলগুলিতে বিশেষ ট্যাগের ফ্লাই ইনজেকশনের মাধ্যমে করা হয়।
আমি জানি এটি একটি পুরানো প্রশ্ন তবে এটি যদি কাউকে সহায়তা করে তবে একটি পুনরায় লোড এনপিএম প্যাকেজ রয়েছে যা এটি সমাধান করে।
আপনি এটি কোনও সার্ভারে চালাচ্ছেন না বা ত্রুটিটি পেয়েছে এমন ক্ষেত্রে Live.js doesn't support the file protocol. It needs http.
কেবল এটি ইনস্টল করুন:
npm install reload -g
এবং তারপরে আপনার সূচী। html ডিরেক্টরিতে চালান:
reload -b
এটি এমন একটি সার্ভার শুরু করবে যা প্রতিবার আপনার পরিবর্তনগুলি সংরক্ষণ করে রিফ্রেশ করবে।
আপনি এটি সার্ভারে বা অন্য যে কোনও কিছুতে চালিয়ে যাচ্ছেন এমন ক্ষেত্রে আরও অনেক অপশন রয়েছে। আরও তথ্যের জন্য রেফারেন্স পরীক্ষা করুন!
ওএস এক্স এবং ক্রোমের জন্য একটি জাভা অ্যাপ রয়েছে যার নাম রেফ্রেসক্রো। এটি স্থানীয় ফাইল সিস্টেমে দেওয়া ফাইলগুলির সেটকে পর্যবেক্ষণ করবে এবং কোনও পরিবর্তন সনাক্ত হলে Chrome পুনরায় লোড করবে:
আপনি যদি জিএনইউ / লিনাক্সে থাকেন তবে আপনি ফালকন নামে একটি দুর্দান্ত শীতল ব্রাউজার ব্যবহার করতে পারেন । এটি Qt WebEngine এর উপর ভিত্তি করে । এটি ঠিক ফায়ারফক্স বা ক্রোমিয়ামের মতো - বাদে এটি কোনও ফাইল আপডেট হওয়ার পরে পৃষ্ঠাটি স্বতঃ সতেজ করে। আপনি ভিএম, ন্যানো বা অ্যাটম, ভিএসকোড, বন্ধনী, জিনি, মাউসপ্যাড ইত্যাদি ব্যবহার করুন কিনা তা অটো রিফ্রেশে তেমন কিছু আসে যায় না
আর্ক লিনাক্সে, আপনি খুব সহজেই ফ্যালকন ইনস্টল করতে পারেন:
sudo pacman -S falkon
এখানে স্ন্যাপ প্যাকেজ।
একটি দ্রুত সমাধান যা আমি মাঝে মাঝে ব্যবহার করি তা হ'ল পর্দাটি দুটি ভাগে ভাগ করা এবং প্রতিবার পরিবর্তন হয়ে গেলে, নথিতে xD ক্লিক করুন।
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
নোড.জেজে, আপনি gulp.js + গুল্প-ওয়াচ (যথাক্রমে একটি টাস্ক রানার এবং পরিবর্তনকারী শ্রোতা) এর সাথে প্রিমাস.জেএস (ওয়েবসকেটস) তারে আপ করতে পারেন, যাতে গল্প আপনার ব্রাউজার উইন্ডোটিকে জানায় যে এটি যখনই এইচটিএমএল, জেএস রিফ্রেশ হওয়া উচিত , ইত্যাদি। এটি ওএস অজোনস্টিক এবং আমার এটি স্থানীয় প্রকল্পে কাজ করছে।
এখানে, পৃষ্ঠাটি আপনার ওয়েব সার্ভার দ্বারা পরিবেশিত হয়, ডিস্ক থেকে কোনও ফাইল হিসাবে লোড হয় না, যা প্রকৃত জিনিসটির চেয়ে বেশি more
এটি আমার পক্ষে কাজ করে (উবুন্টুতে):
#!/bin/bash
#
# Watches the folder or files passed as arguments to the script and when it
# detects a change it automatically refreshes the current selected Chrome tab or
# window.
#
# Usage:
# ./chrome-refresher.sh /folder/to/watch
TIME_FORMAT='%F %H:%M'
OUTPUT_FORMAT='%T Event(s): %e fired for file: %w. Refreshing.'
while inotifywait --exclude '.+\.swp$' -e modify -q \
-r --timefmt "${TIME_FORMAT}" --format "${OUTPUT_FORMAT}" "$@"; do
xdotool search --onlyvisible --class chromium windowactivate --sync key F5 \
search --onlyvisible --class gnome-terminal windowactivate
done
আপনাকে ইনোটিফাই এবং এক্সডটুল প্যাকেজ ইনস্টল করতে হবে ( sudo apt-get install inotify-tools xdotoolউবুন্টুতে) এবং --classআপনার পছন্দসই ব্রাউজার এবং টার্মিনালের প্রকৃত নামগুলিতে আরোগুলি পরিবর্তন করতে হবে ।
বর্ণিত হিসাবে স্ক্রিপ্টটি শুরু করুন এবং কেবল একটি ব্রাউজারে index.html খুলুন। স্ক্রিপ্টটি ভিমে সংরক্ষণের পরে আপনার ব্রাউজারের উইন্ডোটিকে ফোকাস করবে, তা রিফ্রেশ করবে এবং তারপরে টার্মিনালে ফিরে আসবে।
xdotool search --name 127.0.0.1 windowactivate key F5লোকালহোস্টে কাজ করার জন্য (127.0)। 0.1) শুধুমাত্র, অবশ্যই। এখন আমি এটি স্ক্রিপ্ট মধ্যে ফিরে প্লাগ করতে হবে।
সর্বাধিক নমনীয় সমাধান আমি খুঁজে পেয়েছি হ'ল একজন গার্ড সার্ভারের সাথে জুড়ে দেওয়া ক্রোম লাইভরেলোড এক্সটেনশন ।
কোনও প্রকল্পের সমস্ত ফাইল বা কেবলমাত্র আপনার নির্দিষ্ট করা ফাইলগুলি দেখুন। এখানে একটি নমুনা গার্ডফিল কনফিগারেশন রয়েছে:
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
ক্ষতিটি হ'ল আপনাকে প্রতি প্রকল্পে এটি সেট আপ করতে হবে এবং আপনি রুবীর সাথে পরিচিত হলে এটি সহায়তা করে।
আমি টিনক্রো ক্রোম এক্সটেনশনটিও ব্যবহার করেছি - তবে এটি ফ্রেমওয়ার্ক এবং ফাইলের কাঠামোর সাথে শক্তভাবে মিলিত বলে মনে হচ্ছে। (আমি জেকিল প্রকল্পের জন্য টিনকারের ওয়্যারিং আপ করার চেষ্টা করেছি তবে এটি আমাকে আংশিক বা বিন্যাসের পরিবর্তনের জন্য অ্যাকাউন্টিং না করে পরিবর্তনের জন্য একটি ফাইল দেখার অনুমতি দেয়)। টিনক্র তবে, রেলের মতো প্রকল্পগুলির সাথে বক্সের বাইরে দুর্দান্ত কাজ করে যা ধারাবাহিক এবং পূর্বনির্ধারিত ফাইল কাঠামো রয়েছে।
পুনরায় লোড করার জন্য সমস্ত অন্তর্ভুক্ত ম্যাচের নিদর্শনগুলিকে মঞ্জুরি দিলে টিঙ্কার একটি দুর্দান্ত সমাধান হতে পারে তবে প্রকল্পটি এখনও তার বৈশিষ্ট্য সংস্থায় সীমাবদ্ধ।
এটি একটি সাধারণ অজগর স্ক্রিপ্ট ব্যবহার করে করা যেতে পারে।
সম্পূর্ণ বিবরণ এখানে উল্লেখ করা যেতে পারে ।
ওএসএক্সের জন্য অ্যাটকেইয়ের উত্তরের ভিত্তিতে:
$ brew install fswatch
এই সব চক করুন reload.scpt:
function run(argv) {
if (argv.length < 1) {
console.log("Please supply a (partial) URL to reload");
return;
}
console.log("Trying to reload: " + argv[0]);
let a = Application("Google Chrome");
for (let i = 0; i < a.windows.length; i++) {
let win = a.windows[i];
for (let j = 0; j < win.tabs.length; j++) {
let tab = win.tabs[j];
if (tab.url().startsWith("file://") && tab.url().endsWith(argv[0])) {
console.log("Reloading URL: " + tab.url());
tab.reload();
return;
}
}
}
console.log("Tab not found.");
}
এটি প্রথম ট্যাবটি পুনরায় লোড করবে যা এটি খুঁজে পায় যা শুরু হয় file://এবং প্রথম কমান্ড লাইনের যুক্তি দিয়ে শেষ হয়। আপনি এটি পছন্দসই হিসাবে টুইট করতে পারেন।
অবশেষে, এরকম কিছু করুন।
fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html
fswatch -oপ্রতিটি পরিবর্তন ইভেন্টে পরিবর্তিত ফাইলগুলির সংখ্যা আউটপুট দেয়, প্রতি লাইনে একটি করে। সাধারণত এটি কেবল মুদ্রণ করবে 1। xargsসেগুলি পড়ুন 1এবং এর -n1অর্থ এটি প্রতিটিকে একটি নতুন মৃত্যুদন্ড কার্যকর করার যুক্তি হিসাবে পাস করে osascript(যেখানে এটি উপেক্ষা করা হবে)।
tab.title.includes(argv[0])শর্তসাপেক্ষ আমি শিরোনামটি যা URL টি কম খুঁতখুঁতে হতে, এবং কাজ করে যখন ফাইল বদলে একটি স্থানীয় সার্ভার ব্যবহার উপর মেলাতে পারে যেমন: //।
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
এই কোডটি একটি ফাইল লাইভরলোড.জেজে সংরক্ষণ করুন এবং এটি HTML স্ক্রিপ্টের নীচে অন্তর্ভুক্ত করুন:
<script type="text/javascript" src="livereload.js"></script>
এটি কী করবে তা প্রতি 100 মিলি-সেকেন্ডে পৃষ্ঠাটি রিফ্রেশ করুন। কোডে আপনি যে কোনও পরিবর্তন করেন তা তাত্ক্ষণিকভাবে চোখে পড়ে।
ঠিক আছে, এখানে আমার ক্রুড অটো হটকি সমাধান (লিনাক্সে, অটো কী চেষ্টা করুন ) is যখন সংরক্ষণ কী-বোর্ড শর্টকাট চাপা পরার, ব্রাউজার সক্রিয়, ক্লিক করুন রিলোড বোতামে, তারপর ফিরে সম্পাদক স্যুইচ করুন। আমি অন্যান্য সমাধানগুলি চালাতে পেয়ে ক্লান্ত হয়ে পড়েছি। যদি আপনার সম্পাদক অটসোভ করে তবে কাজ করবে না।
^s:: ; '^' means ctrl key. '!' is alt, '+' is shift. Can be combined.
MouseGetPos x,y
Send ^s
; if your IDE is not that fast with saving, increase.
Sleep 100
; Activate the browser. This may differ on your system. Can be found with AHK Window Spy.
WinActivate ahk_class Chrome_WidgetWin_1
WinWaitActive ahk_class Chrome_WidgetWin_1
Sleep 100 ; better safe than sorry.
;~ Send ^F5 ; I dont know why this doesnt work ...
Click 92,62 ; ... so lets click the reload button instead.
; Switch back to Editor. Can be found with AHK Window Spy.
WinActivate ahk_class zc-frame
WinWaitActive ahk_class zc-frame
Sleep 100 ; better safe than sorry.
MouseMove x,y
return
আর ব্যবহার করে অফলাইন সমাধান
এই কোডটি করবে:
এইচটিএমএল-ফাইলে একটি পরিবর্তন সংরক্ষিত হওয়ার সাথে সাথে ব্রাউজারটিকে রিফ্রেশ করুন।
install.packages("servr") servr::httw(dir = "c:/users/username/desktop/")
পাইথন ইত্যাদির জন্যও একই রকম সমাধান রয়েছে exist
এটি আপনার HTML এ যুক্ত করুন to
<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>
আপনি সম্পাদনা করার সময়, আপনার ব্রাউজার পৃষ্ঠাটি ঝাপসা হয়ে গেছে, এটি দেখার জন্য ফিরে স্যুইচ করে, ফোকাস ইভেন্টটি বরখাস্ত করা হয় এবং পৃষ্ঠাটি পুনরায় লোড হয়।
pip install https://github.com/joh/when-changed/archive/master.zip
alias watch_refresh_chrome=" when-changed -v -r -1 -s ./ osascript -e 'tell application \"Google Chrome\" to tell the active tab of its first window to reload' "
তারপরে আপনি যে ডিরেক্টরিটি "ওয়াচ_ফ্রেজ_ক্রোম" নির্বাহ করতে চান তা কেবল প্রবেশ করুন