Автоматическая перезагрузка браузера при сохранении изменений в html-файл, в Chrome?

я редактирую HTML-файл в Vim, и я хочу, чтобы браузер обновлялся всякий раз, когда файл под изменениями.

есть ли плагин для Google Chrome, которое отслеживает изменения файлов и автоматически обновлять страницу каждый раз, когда я Сохранить изменения в файле? Я знаю, что есть XRefresh для Firefox, но я не мог заставить XRefresh работать вообще.

насколько сложно было бы написать сценарий, чтобы сделать это самостоятельно?

17 64
google-chrome vim build-automation

17 ответов:

Я предполагаю, что вы не на 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

21

чистое решение JavaScript!

живу.js

просто добавьте следующее к вашему <head>:

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

Как? Просто включите жить.js и он будет контролировать текущую страницу, включая локальный CSS и Javascript, отправляя последовательные запросы HEAD на сервер. Изменения в CSS будут применяться динамически, а изменения HTML или Javascript будут перезагружать страницу. Попробуй!

где? Жить.js работает в Firefox, Chrome, Safari, Opera и IE6+, пока не доказано обратное. Жить.js не зависит от используемой платформы разработки или языка, будь то Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla или что-то еще.

я скопировал этот ответ почти дословно из здесь, потому что я думаю, что это проще и более общий, чем в настоящее время принятый ответ здесь.

22

Tincr-это расширение Chrome, которое будет обновлять страницу всякий раз, когда файл под изменениями.

22

http://livereload.com/ - родное приложение для OS X, альфа-версия для Windows. С открытым исходным кодом по адресуhttps://github.com/livereload/LiveReload2

10

Handy Bash one-liner для OS X, предполагая, что вы установили 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

8

с добавлением одного мета-тега в документ, вы можете поручить браузеру автоматически перезагружать через заданный интервал:

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

помещенный в тег head вашего документа, этот мета-тег будет указывать браузеру обновляться каждые три секунды.

4

The LivePage расширение Chrome можно легко настроить для отслеживания изменений в локальных файлах.

4

есть приложение java для os x и Chrome под названием Refreshro. Он будет контролировать данный набор файлов в локальной файловой системе и перезагружать Chrome при обнаружении изменений:

http://neromi.com/refreschro/

3

нашел это: http://net.tutsplus.com/tutorials/other/quick-tip-4-ways-to-auto-refresh-your-browser-when-designing-new-sites/

протестирован первый вариант на Win7 64, Firefox10. 0.2 и Chrome версии 24.0.1312.57 м. Хороший обходной путь до сих пор. Не забудьте удалить постпроизводство.

1

в узел.Джей, ты можешь подключить примус.js (websockets) с глотком.js + gulp-watch (бегун задач и слушатель изменений соответственно), так что gulp позволяет вашему окну браузера знать, что оно должно обновляться всякий раз, когда html, js и т. д. меняются. Это OS agnostic, и у меня он работает в локальном проекте.

здесь Страница обслуживается вашим веб-сервером, а не загружается как файл с диска, что на самом деле больше похоже на реальную вещь.

1

это работает для меня (в 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 пакеты (sudo apt-get install inotify-tools xdotool в Ubuntu) и изменить args --class к фактическим именам вашего предпочтительного браузера и терминала.

запустите скрипт, как описано, и просто откройте индекс.HTML в браузере. После каждого сохранения в vim скрипт сфокусирует окно вашего браузера, обновит его, а затем вернется к терминалу.

1

самое гибкое решение, которое я нашел, это хром расширение LiveReload в сочетании с охранник сервера.

смотреть все файлы в проекте, или только те, которые вы укажете. Вот пример конфигурации Guardfile:

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

недостатком является то, что вы должны настроить это для каждого проекта, и это помогает, если вы знакомы с ruby.

Я также использовал расширение tincr chrome - но оно, похоже, тесно связано с фреймворками и файловые структуры. (Я попытался подключить tincr для проекта jekyll, но это позволило мне только наблюдать за одним файлом для изменений, не учитывая включенные, частичные или изменения макета). Однако Tincr отлично работает из коробки с такими проектами, как rails, которые имеют согласованные и предопределенные файловые структуры.

Tincr было бы отличным решением, если бы он разрешал все включающие шаблоны соответствия для перезагрузки, но проект по-прежнему ограничен в своем наборе функций.

1

Это можно сделать с помощью простого скрипта python.

  1. использовать pyinotify для мониторинга определенной папки.
  2. используйте Chrome с включенной отладкой. Обновление может быть сделано через соединение websocket.

полная информация может быть передана здесь.

1

использовать залпом смотреть файлы и 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);
});

Run

залпом служить

редактировать HTML, сохранить и посмотреть перезагрузку браузера. Этот магия осуществляется путем инъекции на лету специального тега в ваши HTML-файлы.

1

установить и настроить chromix

Теперь добавьте это в ваш .vimrc

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

измените порт на то, что вы используете

0

на основе ответа attekei для OSX:

$ 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 (где это будет проигнорировано).

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

0