Каждому веб-разработчику приходится перезагружать свой браузер для просмотра изменений, сделанных в исходном коде веб-страницы или скрипта. В данной статье описана установка приложения под названием «LiveReload», которое позволяет автоматически перезагружать браузер при сохранении файла с кодом на диск. Посмотреть, как это работает, можно в скринкасте.

LiveReload состоит из двух частей:
— Ruby-пакет (gem);
— расширение для браузера.

По умолчанию приложение следит за файлами .html, .css, .js, .png, .gif, .jpg, .php, .php5, .py, .rb и .erb.
Работает под Windows, Mac OS X и Linux, в браузерах Chrome, Safari и Firefox 4.

Далее — пошаговый процесс установки LiveReload 1.6 под Windows.

Установка

1. Скачать и установить Ruby 1.9.1-p430 отсюда (10.72 Мб).
Почему не 1.9.2? Потому что LiveReload не установится на 1.9.2 (пруфы — #48, #60). У меня тоже выдавало такие ошибки, пока не установил 1.9.1.
Путь установки по умолчанию — c:\Ruby191\

2. Скачать последнюю версию Ruby DevKit отсюда (21.62 Мб).
Распаковать в любую папку, к примеру — c:\DevKit\

3. Открыть командную строку (Win+R — cmd) и выполнить три команды (последовательно):

cd c:\Ruby191\bin\
ruby c:\DevKit\dk.rb init
ruby c:\DevKit\dk.rb install

Получим сообщения об успешной установке:

[INFO] found RubyInstaller v1.9.1 at C:/Ruby191
Initialization complete! Please review and modify the auto-generated 'config.yml' file to ensure it contains the root directories to all of the installed Rubies you want enhanced by the DevKit.
[INFO] Installing 'C:/Ruby191/lib/ruby/site_ruby/1.9.1/rubygems/defaults/operating_system.rb'
[INFO] Installing 'C:/Ruby191/lib/ruby/site_ruby/devkit.rb'


4. В командной строке выполнить ещё одну команду:

gem install eventmachine-win32 win32-changenotify win32-event livereload --platform=ruby

Подождать, пока скачаются и установятся все компоненты и документация:

...
Successfully installed livereload-1.6
13 gems installed
...
Installing RDoc documentation for livereload-1.6...


5. Запустить сервер. Для того, чтобы LiveReload следил за определённой папкой, её нужно указать при запуске (в той же командной строке):

livereload d:\UniServer\www\

В ответ получим:

Version: 1.6 (compatible with browser extension versions 1.6.x)
Port: 35729
...
LiveReload is waiting for browser to connect.


6. Установить расширение:
— для Chrome;
— для Safari;
— для Firefox 4.
Далее, подключиться из браузера к серверу LiveReload (нажать на кнопку LR, в Chrome она справа сверху).

7. Готово! Если всё получилось, то в командной строке отобразится:

Browser connected.
Browser URL: ...

Теперь при каждом изменении файлов в папке d:\UniServer\www\ браузер будет автоматически обновляться, а в окне сервера будут добавляться события:

Modified: ...


8. Можно создать ярлык к файлу c:\Ruby191\bin\livereload.bat и дописать в путь папку, за которой нужно следить. Это позволит запускать сервер LiveReload без командной строки, а также добавлять его в автозагрузку Windows. Пример:

C:\Ruby191\bin\livereload.bat d:\UniServer\www\


Примечания

Авторы приложения: Никита Васильев (elv1s), Михаил Гусаров (dottedmag) и Андрей Таранцов (andreyvit). Почему-то ни один из них ещё не рассказал о LiveReload, поэтому я и написал данную статью.
Готовится к выходу новая версия 2.0, которая будет самодостаточным приложением, но станет платной. Альфа-версии для Mac можно попробовать, скачав их с сайта. Для Windows пока нет новых версий, но тоже планируются.
Функция автоматического обновления страницы по умолчанию есть в Espresso и называется Live Preview. Также предварительный просмотр есть в TopStyle и, возможно, в других редакторах. Но описанный в статье способ более универсальный и использует реальный браузер, а не встроенный в редактор.
Лучше всего, на мой взгляд, при веб-разработке с LiveReload держать открытыми два окна одновременно (split windows): слева — код страницы, справа — окно браузера. Можно также пользоваться двумя мониторами (если есть). Чтобы быстро расположить два окна в Win7 слева и справа, пользуйтесь встроенной функцией Aero Snap.