Перезавантаження браузера при змінах
Ви можете змусити Gulp перезавантажити або оновити браузер, коли ви або щось ще, на зразок завдання Gulp, змінюють файл. Є два способи зробити це. Перший полягає в застосуванні плагіна LiveReload, а другий у використанні BrowserSync.
LiveReload
LiveReload поєднується з розширеннями браузера (в тому числі розширеннями Chrome ) Для перезавантаження браузера при виявленні зміни в файлі. Він може бути використаний з плагіном gulp-watch або за допомогою вбудованої функції gulp.watch (), яку я описав раніше. Ось приклад з файлу README сховища gulp-livereload :
var gulp = require ( 'gulp'), less = require ( 'gulp-less'), livereload = require ( 'gulp-livereload'), watch = require ( 'gulp-watch'); gulp.task ( 'less', function () {gulp.src ( 'less / *. less') .pipe (watch ()) .pipe (less ()) .pipe (gulp.dest ( 'css')) .pipe (livereload ());});
Тут відслідковуються зміни всіх файлів відповідних less / *. Less. При виявленні змін генерується CSS, зберігаються файли і перезавантажується браузер.
BrowserSync
Альтернативою LiveReload є BrowserSync . Він також відображає зміни в браузері, але містить набагато більше можливостей.
Коли ви змінюєте код, BrowserSync перезавантажує сторінку або, якщо це CSS, вносить до нього зміни і сторінка не оновлюється. Це досить корисно, якщо ваш сайт не стійкий до оновлення. Припустимо, ви робите чотири клацання в односторінковому додатку, тоді при оновленні ви повернетеся до стартової сторінки. З LiveReload вам потрібно буде кожного разу клацати чотири рази при внесенні зміни. BrowserSync, однак, просто вносить зміни при модифікації CSS, так що вам не доведеться клацати «Назад».
BrowserSync - кращий спосіб перевірити ваш макет в різних браузерах
BrowserSync також синхронізує між браузерами клацання, дії з формою і положення прокрутки. Ви можете відкрити пару браузерів на настільному комп'ютері, а інший на iPhone і потім переміщатися по сайту. Посилання будуть відкриватися у всіх браузерах, а коли ви перейдіть вниз, сторінки на всіх пристроях також прокрутити вниз (зазвичай також плавно!). Під час введення тексту в формі він буде набиратися в кожному вікні. І це поведінка завжди можна відключити при бажанні.
BrowserSync не вимагає браузерного плагіна
BrowserSync не вимагає плагіна для браузера, тому що він працює з вашими файлами і обслуговується скриптом, який відкриває сокет між браузером і сервером. У мене раніше це не викликало ніяких проблем.
Як не дивно, не існує плагіна для Gulp, тому що BrowserSync НЕ маніпулює файлами, тому він на ділі працює самостійно. Проте, модуль BrowserSync на npm можна викликати безпосередньо з Gulp. Для початку встановіть його через npm:
npm install --save-dev browser-sync
Далі наступний gulpfile.js запустить BrowserSync і почне стежити за деякими файлами:
var gulp = require ( 'gulp'), browserSync = require ( 'browser-sync'); gulp.task ( 'browser-sync', function () {var files = [ 'app / ** / *. html', 'app / assets / css / ** / *. css', 'app / assets / imgs /**/*.png ',' app / assets / js / ** / *. js ']; browserSync.init (files, {server: {baseDir:' ./app '}});});
Виконайте gulp browser-sync щоб стежити за відповідними файлами на наявність змін і запустити сервер, який обслуговує файли в папці app. Розробник BrowserSync написав про деяких інших штуках, які ви можете подивитися в його сховищі BrowserSync + Gulp .
Автор і редактори
Автор: Каллум Макрей
Остання зміна: 25.08.2016
Редактори: Влад Мержевіч
