Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Командная строка в Веб дизайне: Live Reload и BrowserSync

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Automation With Gulp
The Command Line for Web Design: Scaffolding New Projects

Russian (Pусский) translation by Nail (you can also view the original English article)

В предыдущем уроке вы научились компилировать и собирать весь проект с короткими командами такими как grunt, grunt watch, gulp и gulp watch.

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

Если вы еще не прошли предыдущие уроки в этой серии, пожалуйста вернитесь и выполните их прежде чем начнете выполнять этот урок.

Автоматическая перезагрузка

Замечание: Чтобы избежать путаницы, существует приложение для рабочего стола и сочетание расширения для браузера Chrome называемое LiveReload которое часто используется вместе с множеством npm пакетов чтобы управлять автоматической перезагрузкой. Мы не будем рассматривать их, выберите любой из двух подходов сами.

Автоматическая перезагрузка с помощью Grunt

Чтобы обеспечить работу автоматической перезагрузки должен быть локальный хост который будет перезагружен, то есть способ показа вашего сайта локально по протоколу http:// вместо file://.

Для того чтобы в вашем Grunt проекте статические файлы были доступны по локальному хосту, и работала автоматическая перезагрузка, используется плагин grunt-express.

Установка grunt-express в ваш проект командой:

Затем включите этот плагин в вашем Gruntfile добавив после существующих строк grunt.loadNpmTasks строки:

Настройте express плагин добавив следующий код:

Вы заметите что в настройке плагина express у нас есть livereload параметр установленный в true, так что после запуска локального просмотра будет автоматически перезагружаться после любых обнаруженных изменений.

Сейчас мы добавим новую задачу start. Мы будем использовать эту задачу для запуска двух задач express  и watch сразу.

Добавьте после существующих строк grunt.registerTask строку:

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

...и вы увидите как откроется браузер по умолчанию с вашим проектом.

Запущенная задача watch будет компилировать ваши Stylus и Jade файлы после каждого сохранения в папку "build".

Express отслеживает изменения сделанные в папке "build" для ваших HTML, CSS или JS которые были перекомилированы и будет автоматически перегружать браузер.

Автоматическая перезагрузка с помощью Gulp

Двинемся дальше и сделаем такое же автоматическое обновление на локальном хосте в Gulp проекте. На этот раз мы собираемся использовать gulp-connect вместо предыдущего.

Установите gulp-connect в ваш проект командой:

Сделайте это доступным в вашем Gulpfile добавив после остальных строк где используется require() функцию:

Установите новую задачу connect добавив под остальными задачами следующий код:

Также как мы сделали с Grunt, мы теперь собираемся создать такую же задачу называемую start которая будет отслеживать изменения в файлах и перезагружать страницу в локальном хосте.

Добавьте следующую строчку кода внизу вашего Gulpfile:

Чтобы включить автоматическую перезагрузку, мы собираемся добавить другие "pipe" в конце двух задач css и html

Добавьте этот обработчик в конце каждого:

После добавления код задач становится таким для css:

....и таким для html:

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

...по сравнению с Grunt здесь нужно перейти вручную по адресу http://localhost:8080 и вы увидите ваш локальный сайт.

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

Браузерная синхронизация

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

С BrowserSync вы можете протестировать ваш проект в любом браузере на любом устройстве, в одном подключении в разных окнах.

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

Использование BrowserSync в Grunt

Чтобы установить grunt-browser-sync плагин в ваш Grunt проект запустите команду:

Закоментируйте или удалите строку кода grunt-express из файла Gruntfile:

Потом добавьте строку кода grunt-browser-sync заместо того кода:

Закомментируйте или удалите задачу express которую вы добавили ранее, и добавьте другой код для задачи browserSync:

В задаче start и поменяйте express на browserSync:

....должно стать так:

Сейчас когда вы запустите команду:

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

В командной строке после запуска вашего BrowserSync сервера вы увидите следующее:

Вставьте адрес помеченный как Local, в адресную строку других браузеров, и вставьте адрес помеченный как External в любые другие устройства у которых есть доступ по локальной сети. Затем вы увидите синхронизированные ответы во всех открытых браузерах на разных устройствах во время взаимодействия с одним из них.

Для более подробной информации о BrowserSync в Grunt перейдите по ссылке:

Использование BrowserSync в Gulp

Сейчас мы выполним похожее действие, на этот раз используя плагин browser-sync для Gulp.

Установите этот плагин в ваш Gulp проект командой:

В Gulpfile закоментируйте или удалите следующую строку:

...и замените это на:

Закоментируйте или удалите существующий код для задачи connect и добавьте вместо него код для задачи browser-sync:

В конце css и html задач перейдите к строке:

...и замените каждую из этих двух строк кода на:

И под конец перейдите к существующему коду задачи start и замените запускаемую задачу connect на browser-sync:

...чтобы стало так:

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

...откроется браузер с вашим локальным сайтом. Точно также как и при использовании BrowserSync в Grunt, адреса предварительного просмотра будут синхронизироваться при взаимодействии в любом браузере и на любом устройстве запущенном по локальной сети.

Для более подробной информации о BrowserSync в Gulp посетите страницу:

В следующем уроке

Вы прошли через все необходимое для создания собственных проектов с нуля, чтобы использовать командную строку в процессе разработки. Но как насчет того когда вы не хотите начинать проект с нуля. Как насчет того когда вы хотите использовать существующий сторонний фреймворк, или вы просто хотите закончить начатый проект?

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

Я жду вас в следующем уроке!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.