Rechargement automatique du navigateur lorsque j'enregistre les modifications dans un fichier HTML, dans Chrome?
J'édite un fichier HTML dans Vim et je souhaite que le navigateur soit actualisé chaque fois que le fichier sous-jacent est modifié.
Existe-t-il un plug-in pour Google Chrome qui écoute les modifications apportées au fichier et actualise automatiquement la page chaque fois que je sauvegarde une modification apportée au fichier? Je sais qu'il existe XRefresh pour Firefox, mais je ne pouvais pas exécuter XRefresh du tout.
Comment serait-il difficile d'écrire un script pour le faire moi-même?
Je suppose que vous n'êtes pas sous OSX? Sinon, vous pourriez faire quelque chose comme ça avec applescript:
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
Il existe également un plugin pour chrome appelé "rafraîchissement automatique plus" où vous pouvez spécifier un rechargement toutes les x secondes:
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=fr
Solution JavaScript pure!
Ajoutez simplement ce qui suit à votre <head>:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
Comment? Il suffit d’inclure Live.js et il surveillera la page actuelle, y compris les CSS et Javascript locaux, en envoyant des requêtes HEAD consécutives au serveur. Les modifications apportées aux CSS seront appliquées de manière dynamique et les modifications HTML ou Javascript rechargeront la page. Essayez le!
Où? Live.js fonctionne sous Firefox, Chrome, Safari, Opera et IE6 + jusqu'à preuve du contraire. Live.js est indépendant du framework de développement ou du langage que vous utilisez, que ce soit Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla ou que ce soit vous-même.
J'ai copié cette réponse presque textuellement de ici , car je pense que c'est plus simple et plus général que la réponse actuellement acceptée ici.}
Tincr est une extension Chrome qui actualisera la page à chaque fois que le fichier sous-jacent est modifié.
http://livereload.com/ - application native pour OS X, version Alpha pour Windows. Open Sourced sur https://github.com/livereload/LiveReload2
Handy Bash one-liner pour OS X, en supposant que vous avez installé fswatch (brew install fswatch). Il surveille un chemin/fichier arbitraire et actualise l'onglet Chrome actif en cas de modification:
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'
En savoir plus sur fswatch ici: https://stackoverflow.com/a/13807906/3510611
Avec l'ajout d'une seule balise Meta dans votre document, vous pouvez demander au navigateur de recharger automatiquement à un intervalle fourni:
<meta http-equiv="refresh" content="3" >
Placée dans la balise head de votre document, cette balise META demandera au navigateur de se réactualiser toutes les trois secondes.
L'extension LivePage Chrome peut facilement être configurée pour surveiller les modifications apportées aux fichiers locaux.
Il existe une application Java pour os x et Chrome appelée Refreschro. Il surveillera un ensemble de fichiers donné sur le système de fichiers local et rechargera Chrome lorsqu'une modification est détectée:
Utilisez Gulp pour regarder les fichiers et Browsersync pour recharger le navigateur.
Les étapes sont les suivantes:
Dans la ligne de commande, exécutez
npm installer --save-dev gulp navigateur-sync
Créez gulpfile.js avec le contenu suivant:
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);
});
Courir
avaler servir
Éditez le HTML, sauvegardez et voyez le rechargement de votre navigateur. La magie se fait par l'injection à la volée d'une balise spéciale dans vos fichiers HTML.
Une solution rapide que j’utilise parfois est de diviser l’écran en deux et, chaque fois qu’une modification est apportée, cliquez sur le document xD.
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
Dans node.js, vous pouvez câbler primus.js (websockets) avec gulp.js + gulp-watch (respectivement un gestionnaire de tâches et un écouteur de modification), de sorte que gulp indique à votre fenêtre de navigateur qu'elle doit s'actualiser à chaque fois que html, js , etc, change. C'est agnostique OS et je l'ai travailler dans un projet local.
Ici, la page est servie par votre serveur Web, elle n’est pas chargée en tant que fichier à partir du disque, ce qui ressemble en réalité davantage à la réalité.
La solution la plus flexible que j'ai trouvée est l'extension chrome LiveReload associée à un serveur guard .
Regardez tous les fichiers d'un projet ou uniquement ceux que vous spécifiez. Voici un exemple de configuration de Guardfile:
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
L'inconvénient est que vous devez configurer ceci par projet et cela aide si vous êtes familier avec Ruby.
J'ai également utilisé l'extension Tincr chrome, mais elle semble être étroitement liée aux cadres et aux structures de fichiers. (J'ai essayé de câbler un projet jekyll mais cela ne m'a permis de regarder qu'un seul fichier pour les changements, sans tenir compte des changements d'inclusion, partiels ou de présentation). Cependant, Tincr fonctionne parfaitement avec des projets tels que Rails qui ont des structures de fichiers cohérentes et prédéfinies.
Tincr serait une excellente solution si elle autorisait des modèles de correspondance inclusifs pour le rechargement, mais le projet est toujours limité dans son ensemble de fonctionnalités.
Cela fonctionne pour moi (sous 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
Vous devrez peut-être installer inotify et xdotool packages (Sudo apt-get install inotify-tools xdotool dans Ubuntu) et changer les arguments de --class pour les noms réels de votre navigateur et terminal préférés.
Démarrez le script comme décrit et ouvrez simplement index.html dans un navigateur. Après chaque enregistrement dans vim, le script va concentrer la fenêtre de votre navigateur, l'actualiser, puis revenir au terminal.
Basé sur la réponse de attekei pour OSX:
$ brew install fswatch
Ajoutez tout cela dans 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.");
}
Cela rechargera le premier onglet détecté qui commence par file:// et se termine par le premier argument de ligne de commande. Vous pouvez le modifier comme vous le souhaitez.
Enfin, faites quelque chose comme ça.
fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html
fswatch -o affiche le nombre de fichiers modifiés dans chaque événement de modification, un par ligne. Habituellement, il imprimera simplement 1. xargs lit ces 1s dans et -n1 signifie que chacun passe comme argument à une nouvelle exécution de osascript (où il sera ignoré).
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
Enregistrez ce code dans un fichier livereload.js et incluez-le au bas du script HTML comme suit:
<script type="text/javascript" src="livereload.js"></script>
Qu'est-ce que cela va faire est d'actualiser la page toutes les 100 millièmes de seconde. Tous les changements que vous apportez dans le code sont immédiatement visibles aux yeux.
Je sais que c’est une vieille question, mais au cas où cela aiderait quelqu'un, il existe un paquet reload npm qui le résout.
Si vous ne l’utilisez pas sur un serveur ou si vous avez reçu l’erreur Live.js doesn't support the file protocol. It needs http.
Il suffit de l'installer:
npm install reload -g
puis dans votre répertoire index.html, exécutez:
reload -b
Il lancera un serveur qui s'actualisera chaque fois que vous enregistrez vos modifications.
Il existe de nombreuses autres options dans le cas où vous l’exécutez sur le serveur ou autre. Vérifiez la référence pour plus de détails!
Ok, voici mon brut Hot Hotkey automatique solution (Sous Linux, essayez Auto Key ). Lorsque vous appuyez sur le raccourci clavier enregistrer, activez le navigateur, cliquez sur le bouton recharger, puis revenez dans l'éditeur. Je suis juste fatigué de faire fonctionner d'autres solutions. Ne fonctionnera pas si votre éditeur enregistre automatiquement.
^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
Installer et configurer chromix
Ajoutez maintenant ceci à votre .vimrc
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
changez le port pour ce que vous utilisez
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' "
puis entrez simplement le répertoire que vous voulez surveiller, exécutez "watch_refresh_chrome"