vim - recargar - forzar carga javascript

¿Volver a cargar automáticamente el navegador cuando guarde los cambios en el archivo html, en Chrome?

Question

Estoy editando un archivo HTML en Vim y quiero que el navegador se actualice cada vez que cambie el archivo.

¿Hay un complemento para Google Chrome que escuche los cambios en el archivo y actualice automáticamente la página cada vez que guardo un cambio en el archivo? Sé que hay XRefresh para Firefox pero no pude ejecutar XRefresh.

¿Qué tan difícil sería escribir un guión para hacer esto yo mismo?

Answer 1

¿Supongo que no estás en OSX? De lo contrario, podrías hacer algo como esto con applescript:

http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/

También hay un complemento para Chrome denominado "auto refresh plus" en el que puede especificar una recarga cada x segundos:

https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en

Answer 2

Basado en la respuesta de attekei para OSX:

$ brew install fswatch

reload.scpt todo esto a 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.");
}

Eso volverá a cargar la primera pestaña que encuentre que comienza con file:// y finaliza con el primer argumento de línea de comando. Puede ajustarlo como lo desee.

Finalmente, haz algo como esto.

fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html 

fswatch -o el número de archivos que han cambiado en cada evento de cambio, uno por línea. Usualmente solo imprimirá 1 . xargs lee esas 1 s en y -n1 significa que pasa cada una como argumento a una nueva ejecución de osascript (donde será ignorado).

Answer 3

Con la adición de una metaetiqueta única en su documento, puede indicar al navegador que vuelva a cargar automáticamente en un intervalo proporcionado:

<meta http-equiv="refresh" content="3" >

Situada dentro de la etiqueta principal de su documento, esta metaetiqueta le indicará al navegador que se actualice cada tres segundos.

Answer 4

En node.js, puede cablear primus.js (websockets) con gulp.js + gulp-watch (un corredor de tareas y un detector de cambios, respectivamente), de modo que ese trago le permita a la ventana de su navegador saber que debe actualizar cada vez que html, js , etc., cambio. Esto es un agnóstico del sistema operativo y lo tengo trabajando en un proyecto local.

Aquí, su servidor web sirve la página, no se carga como un archivo del disco, que en realidad es más parecido a lo real.

Answer 5

Encontrado esto: http://net.tutsplus.com/tutorials/other/quick-tip-4-ways-to-auto-refresh-your-browser-when-designing-new-sites/

Primera opción probada en Win7 64, Firefox 10.0.2 y Chrome Versión 24.0.1312.57 m. Buena solución hasta ahora. Recuerde eliminar la post producción.

Answer 6

Esto funciona para mí (en 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

Es posible que necesite instalar los paquetes inotify y xdotool ( sudo apt-get install inotify-tools xdotool en Ubuntu) y cambiar args of - --class a los nombres reales de su navegador y terminal preferidos.

Inicie el script como se describe y simplemente abra index.html en un navegador. Después de guardar en vim, la secuencia de comandos enfocará la ventana de su navegador, la actualizará y luego regresará a la terminal.

Answer 7

Esto se puede hacer usando una secuencia de comandos de python simple.

1. Use pyinotify para monitorear una carpeta en particular.
2. Use Chrome con la depuración habilitada. La actualización se puede hacer a través de una conexión websocket.

Los detalles completos pueden ser referidos here .

Answer 8

Handy Bash one-liner para OS X, suponiendo que haya instalado fswatch ( brew install fswatch ). Mira una ruta / archivo arbitrario y actualiza la pestaña activa de Chrome cuando hay cambios:

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''

Vea más sobre fswatch aquí: https://.com/a/13807906/3510611

Answer 9

Hay una aplicación java para os x y Chrome llamada Refreschro. Supervisará un conjunto determinado de archivos en el sistema de archivos local y volverá a cargar Chrome cuando se detecte un cambio:

http://neromi.com/refreschro/

Answer 10

Instalar y configurar chromix

Ahora agrega esto a tu .vimrc

autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload

cambia el puerto a lo que usas

Answer 11

La extensión de LivePage Chrome se puede configurar fácilmente para supervisar los cambios en los archivos locales.

Answer 12

La solución más flexible que he encontrado es la extensión LiveReload de Chrome combinada con un servidor de guardia .

Mira todos los archivos en un proyecto, o solo los que especifiques. Aquí hay una configuración de Guardfile de muestra:

guard ''livereload'' do
  watch(%r{.*/.(css|js|html|markdown|md|yml)})
end

La desventaja es que tienes que configurar esto por proyecto y te ayuda si estás familiarizado con Ruby.

También he usado la extensión de Chrome de Tincr, pero parece estar estrechamente unida a los marcos y las estructuras de archivos. (Intenté cablear el tincr para un proyecto de jekyll, pero solo me permitió mirar un solo archivo para ver los cambios, sin considerar los cambios de diseño, parciales o de diseño). Sin embargo, Tincr funciona a la perfección con proyectos como los rieles que tienen estructuras de archivos consistentes y predefinidas.

Tincr sería una gran solución si permitiera todos los patrones de coincidencia inclusiva para volver a cargar, pero el proyecto sigue siendo limitado en su conjunto de características.

Answer 13

Tincr es una extensión de Chrome que actualizará la página cada vez que cambie el archivo.

Answer 14

Use Gulp para ver los archivos y Browsersync para volver a cargar el navegador.

Los pasos son:

En la línea de comando ejecuta

npm install --save-dev gulp navegador-sincronización

Crea gulpfile.js con los siguientes contenidos:

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);
});

correr

trago de servir

Edite HTML, guarde y vea la recarga de su navegador. La magia se realiza mediante la inyección inmediata de una etiqueta especial en tus archivos HTML.

Answer 15

http://livereload.com/ - aplicación nativa para OS X, versión Alpha para Windows. Abierto de origen en https://github.com/livereload/LiveReload2

Answer 16

¡Solución de JavaScript pura!

Live.js

Simplemente agregue lo siguiente a su <head> :

<script type="text/javascript" src="http://livejs.com/live.js"></script>

¿Cómo? Simplemente incluya Live.js y supervisará la página actual incluyendo CSS y Javascript locales enviando solicitudes HEAD consecutivas al servidor. Los cambios en CSS se aplicarán dinámicamente y los cambios en HTML o Javascript recargarán la página. ¡Intentalo!

¿Dónde? Live.js funciona en Firefox, Chrome, Safari, Opera e IE6 + hasta que se demuestre lo contrario. Live.js es independiente del marco de desarrollo o del idioma que uses, ya sea Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla o lo que quieras.

Copié esta respuesta casi textualmente a partir de here , porque creo que es más fácil y más general que la respuesta actualmente aceptada aquí.

Answer 17

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'' "

luego simplemente ingrese el directorio que desea supervisar ejecute "watch_refresh_chrome"