Урок Перезагрузка с помощью Browser Sync

[TaLLeR43]

Рейтинг темы

4.00 звёзд

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

Сперва нам следует установить Browser Sync:

$ npm install browser-sync --save-dev

Возможно, вы заметили, что при установке Browser Sync отсутствует префикс gulp-. Это связано с тем, что Browser Sync работает с Gulp, поэтому нам не нужно использовать плагин.

Чтобы воспользоваться Browser Sync, потребуется его подключить через оператор require.

<span>var</span> browserSync <span>=</span> <span>require</span>(<span>'browser-sync'</span>).<span>create</span>();

Нам понадобится создать задачу browserSync, чтобы позволить Gulp перезагружать сервер через Browser Sync. Для этого нужно сообщить Browser Sync, где располагается корень сервера. В нашем случае это папка app:

gulp.<span>task</span>(<span>'browserSync'</span>, <span>function</span>() {<br>  browserSync.<span>init</span>({<br>    server: {<br>      baseDir: <span>'app'</span><br>    },<br>  })<br>})

Мы также должны немного изменить задачу sass, чтобы Browser Sync мог обновлять CSS в браузере всякий раз, когда выполняется задача sass.

gulp.<span>task</span>(<span>'sass'</span>, <span>function</span>() {<br>  <span>return</span> gulp.<span>src</span>(<span>'app/scss/**/*.scss'</span>) <span>// Получает все файлы с расширением .scss из папки app/scss</span><br>    .<span>pipe</span>(<span>sass</span>())<br>    .<span>pipe</span>(gulp.<span>dest</span>(<span>'app/css'</span>))<br>    .<span>pipe</span>(browserSync.<span>reload</span>({<br>      stream: <span>true</span><br>    }))<br>});

Мы завершили настройку Browser Sync и теперь должны запустить задачи watch и browserSync одновременно, чтобы происходила перезагрузка в реальном времени.

Будет неудобно открывать две командные строки и выполнять gulp browserSync и gulp watch по отдельности, так что заставим Gulp запускать их вместе. Для этого сообщим задаче watch, что задача browserSync должна быть завершена до запуска watch. Мы можем сделать это, добавив второй аргумент к задаче watch. Синтаксис следующий:

gulp.<span>task</span>(<span>'watch'</span>, [<span>'массив'</span>, <span>'задач'</span>, <span>'завершённых'</span>, <span>'до'</span>, <span>'watch'</span>], <span>function</span> (){<br>  <span>// ...</span><br>})

В нашем случае мы добавляем задачу browserSync.

gulp.<span>task</span>(<span>'watch'</span>, [<span>'browserSync'</span>], <span>function</span> (){<br>  gulp.<span>watch</span>(<span>'app/scss/**/*.scss'</span>, [<span>'sass'</span>]); <br>  <span>// Другие отслеживания</span><br>})

Теперь при выполнении gulp watch в командной строке, Gulp должен одновременно запустить задачи sass и browserSync. После их завершения будет запущена задача watch.

Одновременно с этим откроется окно браузера, которое указывает на app/index.html. Если вы измените файл styles.scss, то увидите, как браузер перезагружается автоматически.
Есть ещё одна вещь, о которой надо сказать. Поскольку мы уже отслеживаем файлы .scss для перезагрузки, то почему бы не пойти дальше и перезагружать браузер при сохранении какого-либо файла HTML или JavaScript? Мы можем сделать это, добавив ещё два процесса и вызвав функцию browserSync.reload при сохранении файла:

gulp.<span>task</span>(<span>'watch'</span>, [<span>'browserSync'</span>, <span>'sass'</span>], <span>function</span> (){<br>  gulp.<span>watch</span>(<span>'app/scss/**/*.scss'</span>, [<span>'sass'</span>]); <br>  <span>// Перезагрузка браузера при изменении файлов HTML или JS</span><br>  gulp.<span>watch</span>(<span>'app/*.html'</span>, browserSync.reload); <br>  gulp.<span>watch</span>(<span>'app/js/**/*.js'</span>, browserSync.reload); <br>});

Итак, в этом разделе мы научились трём вещам:

1. запускать веб-сервер для разработки;
2. использовать препроцессор Sass;
3. перезагружать браузер при сохранении файла.

В следующем разделе мы рассмотрим оптимизацию ресурсов. Начнём с оптимизации файлов CSS и JavaScript.