3 способа автоматически перезагрузить страницу
Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)
В этом руководстве вы узнаете о перезагрузке страницы в браузере – особенно автоматической – и мы рассмотрим три способа это осуществить. Начнем!
Начинаем!

Давайте взглянем на типичное рабочее окружение фронт-энд разработчика: у вас есть редактор кода, возможно вы пишите немного 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
Browsersync
Третий способ, который быстро становится моим фаворитом, это Browsersync. Browsersync – это намного больше, чем простое обновление страницы; он помогает также проводить синхронное тестирование в разных браузерах.
Чтобы все заработало, вам понадобится Node.js, так что начнем с его установки. Чтобы понять, как это будет работать, ознакомьтесь со статьей "Командная строка для веб-дизайнера: подключаем сторонние пакеты". Как только мы установим Node, начнем установку Browsersync следующей командой npm (Node Package Manager):
npm install g- browser-sync
Чтобы использовать Browsersync, нам понадобится другая команда, и она будет меняться в зависимости от того, чего мы конкретно хотим. Например, эта команда настроит статичное серверное окружение и предложит, чтобы Browsersync следил за всеми файлами для автоматического обновления:
browser-sync start --server --files "*.*"
Чтобы ознакомиться со всеми досупными командами, ознакомьтесь с документацией.



Полезные ссылки
Заключение
Вот и все! Надеюсь это руководство убедило вас перестать тратить время и попробовать хотя бы один из этих способов для автоматического обновления страниц в браузере. Если у вас есть еще какие-то способы, поделитесь ими в комментариях!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weekly