В этом руководстве вы узнаете о перезагрузке страницы в браузере – особенно автоматической – и мы рассмотрим три способа это осуществить. Начнем!

Начинаем!

Давайте взглянем на типичное рабочее окружение фронт-энд разработчика: у вас есть редактор кода, возможно вы пишите немного HTML кода, затем у вас есть CSS, который может включать в себя Sass, и браузер для тестирования Каждый раз, когда вы делаете изменения в коде, вы возвращаетесь в браузер, жмете обновить и смотрите на изменения.

Это может показаться быстрым актом, но подумайте о том, что вы нажимаете ее постоянно. Это однозначно можно улучшить. Давайте взглянем на три инструмента, которые позаботятся целиком о процессе обновления страницы, автоматически.

LiveReload

LiveReload существует давно и он хорош. Он имеет приложения для Mac OS и Windows, а стоит (на момент статьи) $9.99.

Начните с добавления JavaScript сниппета в ваши файлы, либо же в сочетании с расширением для браузера. Если вы используете расширение, вам понадобится указать настройки, чтобы убедиться, что доступ к файлам включен.

Полезные ссылки

• Расширение LiveReload для Chrome
• Расширение LiveReload для Firefox
• Расширение LiveReload для Internet Explorer
• Командная строка для веб-дизайнера: LiveReload и BrowserSync

Grunt Watch

Если вам удобно использовать командную строку, я рекомендую взглянуть на этот вариант. Grunt – это JavaScript исполнитель, вы можете использовать его для автоматизации различных задач, которыми обычно вы занимаетесь вручную – включая обновления страницы в браузере.

Мы используем плагин Grunt Watch (который, на деле, называется ”grunt-contrib-watch“), который вам нужно будет загрузить через NPM.

Задача Watch в нашем gruntfile.js включает livereload: true, и на следит за всеми файлами в вашем проекте.

watch: {
    
    files: ['*.*'],
    options: {
        livereload: true
    }

}

Вновь, нам понадобится расширение LIveReload для браузера. Все будет работать также, плюс вы сможете добавить еще какие-то задачи.

Источники Grunt

• grunt-contrib-watch на GitHub
• Командная строка для веб-дизайнера: автоматизация с помощью Grunt

Browsersync

Третий способ, который быстро становится моим фаворитом, это Browsersync. Browsersync – это намного больше, чем простое обновление страницы; он помогает также проводить синхронное тестирование в разных браузерах.

Чтобы все заработало, вам понадобится Node.js, так что начнем с его установки. Чтобы понять, как это будет работать, ознакомьтесь со статьей "Командная строка для веб-дизайнера: подключаем сторонние пакеты". Как только мы установим Node, начнем установку Browsersync следующей командой npm (Node Package Manager):

npm install g- browser-sync

Чтобы использовать Browsersync, нам понадобится другая команда, и она будет меняться в зависимости от того, чего мы конкретно хотим. Например, эта команда настроит статичное серверное окружение и предложит, чтобы Browsersync следил за всеми файлами для автоматического обновления:

browser-sync start --server --files "*.*"

Чтобы ознакомиться со всеми досупными командами, ознакомьтесь с документацией.

Полезные ссылки

• browsersync.io
• Документация browsersync
  

Заключение

Вот и все! Надеюсь это руководство убедило вас перестать тратить время и попробовать хотя бы один из этих способов для автоматического обновления страниц в браузере. Если у вас есть еще какие-то способы, поделитесь ими в комментариях!