Chromeでhtmlファイルへの変更を保存するときにブラウザーを自動再読み込みしますか？
VimでHTMLファイルを編集していますが、その下のファイルが変更されるたびにブラウザーを更新する必要があります。
GoogleのプラグインはありますかChromeファイルの変更をリッスンし、ファイルに変更を保存するたびにページを自動更新しますか？FirefoxのXRefreshがあることは知っていますが、取得できませんでしたXRefreshを実行します。
これを自分で行うためのスクリプトを書くのはどれくらい難しいでしょうか？
OSXを使用していないと思いますか？それ以外の場合は、applescriptを使用して次のようなことができます。
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
また、chrome "auto refresh plus"と呼ばれるプラグインもあり、x秒ごとにリロードを指定できます。
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en
純粋なJavaScriptソリューション！
次を<head>に追加するだけです：
<script type="text/javascript" src="http://livejs.com/live.js"></script>
どうやって？ Live.jsを含めるだけで、連続したHEADリクエストをサーバーに送信することにより、ローカルCSSおよびJavascriptを含む現在のページを監視します。CSSへの変更は動的に適用され、HTMLまたはJavascriptの変更により、ページ。試してみてください！
どこ？ Live.jsは、Firefox、Chrome、Safari、OperaおよびIE6 +で動作することが証明されるまで動作します。Live.jsは、Ruby、Handcraft、Python、 Django、NET、Java、Php、Drupal、Joomlaまたはwhat-have-you。
ここ からこの回答をほぼそのままコピーしました。現在受け入れられている回答よりも簡単で一般的だと思うからです!
TincrはChrome=拡張子で、その下のファイルが変更されるたびにページを更新します。
OS X用のHandy Bashワンライナー、fswatch（brew install fswatch）。任意のパス/ファイルを監視し、変更がある場合にアクティブなChromeタブを更新します。
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
http://livereload.com/ -OS Xのネイティブアプリ、Windowsのアルファ版。 https://github.com/livereload/LiveReload2 でオープンソース化
ドキュメントに単一のメタタグを追加すると、指定された間隔で自動的にリロードするようブラウザに指示できます。
<meta http-equiv="refresh" content="3" >
ドキュメントのheadタグ内に配置されたこのメタタグは、ブラウザに3秒ごとに更新するよう指示します。
LivePage Chrome=拡張機能は、ローカルファイルの変更を監視するように簡単に設定できます。
Gulp を使用してファイルを監視し、 Browsersync を使用してブラウザをリロードします。
手順は次のとおりです。
コマンドラインで実行
npm install --save-dev gulp browser-sync
次の内容で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);
});
走る
ぐるぐる
HTMLを編集し、保存してブラウザのリロードを確認します。魔法は、HTMLファイルに特別なタグをオンザフライで注入することによって行われます。
Os x用のJavaアプリと、RefreschroというChromeがあります。ローカルファイルシステム上の特定のファイルセットを監視し、変更が検出されたときにChromeをリロードします。
私が時々使用する簡単な解決策は、画面を2つに分割し、変更が行われるたびにドキュメントxDをクリックすることです。
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
Node.jsでは、gulp.js + gulp-watch（それぞれタスクランナーと変更リスナー）でprimus.js（websockets）を関連付けることができるため、gulpはHTML、js 、など、変更します。これはOSに依存しないため、ローカルプロジェクトで作業しています。
ここで、ページはディスクからファイルとしてロードされるのではなく、Webサーバーによって提供されます。これは実際には本物に似ています。
私が見つけた最も柔軟な解決策は、 chrome LiveReload extension と guard server との組み合わせです。
プロジェクト内のすべてのファイル、または指定したファイルのみを監視します。以下にサンプルのGuardfile構成を示します。
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
欠点は、プロジェクトごとにこれを設定する必要があり、Rubyに精通している場合に役立ちます。
Tincr chrome拡張も使用しましたが、フレームワークやファイル構造と密接に結びついているようです。 （jekyllプロジェクト用にtincrを接続しようとしましたが、インクルード、部分的またはレイアウトの変更を考慮せずに、単一のファイルの変更のみを監視することができました）。しかし、Tincrは、Railsのような一貫性のある事前定義されたファイル構造を持つプロジェクトですぐに使用できます。
再読み込みにすべての包括的な一致パターンを許可した場合、Tincrは優れたソリューションになりますが、プロジェクトの機能セットはまだ制限されています。
これは私のために動作します（Ubuntuで）：
#!/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
inotifyおよびxdotoolパッケージ（UbuntuではSudo apt-get install inotify-tools xdotool）をインストールし、--classの引数を好みのブラウザの実際の名前に変更する必要がある場合があります。そしてターミナル。
説明に従ってスクリプトを開始し、ブラウザでindex.htmlを開きます。 vimで保存するたびに、スクリプトはブラウザのウィンドウにフォーカスを合わせて更新し、ターミナルに戻ります。
OSXに対するattekeiの回答に基づく：
$ 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行に1つずつ出力します。通常は1のみを出力します。 xargsはそれらの1sを読み取り、-n1は、それぞれをosascriptの新しい実行への引数として渡すことを意味します（無視されます）。
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
このコードをファイルに保存しますlivereload.js
<script type="text/javascript" src="livereload.js"></script>
これにより、100ミリ秒ごとにページが更新されます。コードに加えた変更は、すぐに目に見えます。
これは古い質問ですが、誰かを助ける場合には、それを解決する reload npmパッケージがあります。
サーバーで実行していない場合、またはエラーを受け取った場合Live.js doesn't support the file protocol. It needs http.
インストールするだけです：
npm install reload -g
次に、index.htmlディレクトリで次を実行します。
reload -b
変更を保存するたびに更新されるサーバーが起動します。
サーバーなどで実行する場合、他の多くのオプションがあります。詳細についてはリファレンスを確認してください！
わかりました、ここに私の粗雑な 自動ホットキー ソリューション（Linuxでは、 自動キー を試してください）。 saveキーボードショートカットが押されたら、ブラウザーをアクティブにし、reloadボタンをクリックしてから、エディターに戻ります。他のソリューションを実行するのにうんざりしています。エディターが自動保存を行う場合は、うまくいきません。
^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
インストールとセットアップ chromix
これを.vimrcに追加します
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
ポートを使用するものに変更します
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' "
次に、監視するディレクトリを入力して、「watch_refresh_chrome」を実行します