Browser Sync спрощує веб-розробку за рахунок запуску веб-сервера та його швидкого перезавантаження у реальному часі. У Browser Sync є й інші можливості, такі як синхронізація дій на кількох пристроях.
Спершу нам слід встановити Browser Sync:
$ npm install browser-sync--save-dev
Можливо, ви помітили, що при установці Browser Sync відсутня префікс gulp-. Це пов'язано з тим, що Browser Sync працює з Gulp, тому нам не потрібно використовувати плагін.
Щоб скористатися Browser Sync, потрібно його підключити через оператор require.
var browserSync=require('browser-sync').create();</pre>
<p>Нам потрібно створити завдання <code>browserSync, щоб дозволити Gulp перезавантажувати сервер через Browser Sync. Для цього потрібно повідомити Browser Sync, де знаходиться корінь сервера. У нашому випадку це папка app: <code data-language="javascript">gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, }) })Ми також маємо трохи змінити завдання sass, щоб Browser Sync міг оновлювати CSS у браузері щоразу, коли виконується завдання sass.
<code data-language="javascript">gulp.task('sass', function() { return gulp.src('app/scss/**/*.scss') //Отримує всі файли з розширенням .scss з папки app/scss .pipe(sass()) .pipe(gulp.dest( 'app/css')) .pipe(browserSync.reload({ stream: true })) });Ми завершили налаштування Browser Sync і тепер повинні запустити завдання watch і browserSync одночасно, щоб відбувалося перезавантаження в реальному часі.
Буде незручно відкривати два командні рядки і виконувати gulp browserSync та gulp watch окремо, так що змусимо Gu lp запускати їх разом. Для цього повідомимо завдання watch, що завдання browserSync має бути завершено до запуску watch. Ми можемо це зробити, додавши другий аргумент до завдання watch. Синтаксис наступний:
<code data-language="javascript">gulp.task('watch', ['масив', 'задач', 'завершених', 'до ', 'watch'], function (){ //... })У нашому випадку ми додаємо завдання browserSync.
<code data-language="javascript">gulp.task('watch', ['browserSync'], function (){ gulp.watch('app/scss/**/*). scss', ['sass']);//Інші відстеження })Тепер при виконанні gulp watch у командному рядку, Gulp повинен одночасно запустити завдання sass та browserSync. Після їх завершення буде запущено завдання watch.
Одночасно відкриється вікно браузера, яке вказує на app/index.html. Якщо ви зміните файл styles.scss, побачите, як браузер перезавантажується автоматично.
Є ще одна річ, про яку треба сказати. Оскільки ми вже відстежуємо файли .scss для перезавантаження, чому б не піти далі і перезавантажувати браузер при збереженні будь-якого файлу HTML або JavaScript? Ми можемо зробити це, додавши ще два процеси і викликавши функцію browserSync.reload при збереженні файлу:
<code data-language="javascript"> gulp.task('watch', ['browserSync', 'sass'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); //Перезавантаження браузера при зміні файлів HTML або JS gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); });Отже, в цьому розділі ми навчилися трьом речам:
- запускати веб-сервер для розробки;
- використовувати препроцесор Sass;
- перезавантажувати браузер під час збереження файлу.
У наступному розділі ми розглянемо оптимізацію ресурсів. Почнемо з оптимізації файлів CSS та JavaScript.