Редактируем html и css в Sublime Text 2 и VIM без перезагрузки броузера

Для быстрой верстки очень удобно использовать LiveReload, который автоматически перезагружает редактируемый HTML файл в веб броузере после его сохранения. LiveReload поддерживает компиляцию на лету нескольких форматов, а именно LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade. Сам LiveRealod поставляется в виде нескольких реализаций: расширение для броузера(требуется в любом случае), приложение для мака (что для нах не очень подходит так как оно платное), расширение для текстового редактора и консольная версия.

Плагин для вима к сожалению уже устарел и не поддерживает новый протокол. Поэтому для текстового редактора vim мы воспользуемся консольной версией LiveReload который написан на питоне. Для Sublime Text 2 существует расширение, которое доступно в менеджере репозиториев и устанавливается очень легко.

Консольный LiveReload и Vim

Данным туториалом можно воспользоваться не только для редактора Vim, но и для других текстовых редакторов, у которых нет поддержки расширения LiveReload. Для установки LiveReload достаточно запустить одну из следующих команд в консоле:

pip install livereload
easy_install livereload

После чего для вас станет доступна команда livereload. Но это еще не все! Вам понадобится расширение для броузера Chrome или Firefox. Для этого переходим по ссылке (для google chrome) https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei и устанавливаем расширение. Обязательно необходимо в списке расширений Chrome включить опцию "Разрешить открывать файлы по ссылкам" для LiveReload, как показано на скриншоте:

Далее в папке вашего проекта (где лежат ваши html и css файлы) создать так называемый Guardfile. Например вот содержимое моего guard файла:

#!/usr/bin/env python
from livereload.task import Task
 
Task.add('*.html')

Создайте файл с названием Guardfile с вышеуказанным кодом. Если вы используете less вам понадобится файл с такими строчками кода:
#!/usr/bin/env python
from livereload.task import Task
from livereload.compiler import lessc
 
Task.add('style.less', lessc('style.less', 'style.css'))

Теперь в директории с проектом запустите команду:
livereload

Теперь что бы все заработало достаточно открыть html файл в любом текстовом редакторе и произвести его редактирование. Параллельно откройте html файл в хроме и вы увидете что после каждого сохранения файла страница будет перезагружена. Видео демонстрирующее работу LiveReload:

LiveReload и SublimeText 2

Для Sublime Text 2 существует удобное расширение, где не нужно пользоваться командной утилитой livereload, а достаточно всего лишь открыть редактируемый файл и сервер автоматически запустится. Инструкция по установки менеджера пакетов находится по адресу: http://wbond.net/sublime_packages/package_control/installation далее перезапустите редактор и нажмите комбинацию клавиш Ctrl+Shift+P. В поле ввода введите Package Control: Install Package и нажмите Enter. Далее появится еще одно поле ввода где необходимо ввести название устанавливаемого плагина, в нашем случае это LiveReload. После установки перезапустите редактор и попробуйте отредактировать и сохранить любой html файл, предварительно открыв его в броузере и нажав кнопку livereload.