Ви можете змусити Gulp перезавантажити або оновити браузер, коли ви або ще щось, на кшталт завдання Gulp, змінюють файл. Є два способи зробити це. Перший полягає у застосуванні плагіна LiveReload, а другий у використанні BrowserSync.
LiveReload
LiveReload поєднується з розширеннями браузера (у тому числі розширеннями Chrome) для перезавантаження браузера при виявленні зміни у файлі. Він може бути використаний з плагіномgulp-watch або за допомогою вбудованої функції gulp.watch(), яку я описав раніше. Ось приклад із файлу README сховища gulp-livereload:
<code data-language="javascript">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. файлами:
<code data-language="javascript">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.