К скринкасту о Browsersync добавим фрагменты из web-starter-kit/gulpfile.babel.js

И запомним, что вариантов gulpfile.babel.js в репозитории много. Здесь только фрагменты из master. А пост начинается с видео и кода к скринкасту Gulp 7: Browsersync... Плагины live-reload, browser-sync вставляют скрипты на html страницу. Как эти скрипты отслеживают изменения? Разбираться некогда, сначала бы опции освоить. Но на кнопку reload браузера теперь нажимть не надо. Все пересобирается само.

Browsersync Documentation

gulp-screencast/07-browsersync/gulpfile.js¶

live-reload - хорош, но browser-sync - синхронизирует не только ихменения, но и действия в браузерах

In [ ]:

'use strict';

const gulp = require('gulp');
const stylus = require('gulp-stylus');
const sourcemaps = require('gulp-sourcemaps');
const debug = require('gulp-debug');
const gulpIf = require('gulp-if');
const del = require('del');
const browserSync = require('browser-sync').create();


const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';

gulp.task('styles', function() {

  return gulp.src('frontend/styles/main.styl')
      .pipe(gulpIf(isDevelopment, sourcemaps.init()))
      .pipe(stylus())
      .pipe(gulpIf(isDevelopment, sourcemaps.write()))
      .pipe(gulp.dest('public'));

});

gulp.task('clean', function() {
  return del('public');
});

gulp.task('assets', function() {
  return gulp.src('frontend/assets/**', {since: gulp.lastRun('assets')})
      .pipe(debug({title: 'assets'}))
      .pipe(gulp.dest('public'));
});


gulp.task('build', gulp.series(
    'clean',
    gulp.parallel('styles', 'assets'))
);

gulp.task('watch', function() {
  gulp.watch('frontend/styles/**/*.*', gulp.series('styles'));

  gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));
});

gulp.task('serve', function() {
  browserSync.init({
    server: 'public'
  });

  browserSync.watch('public/**/*.*').on('change', browserSync.reload);
});

gulp.task('dev',
    gulp.series('build', gulp.parallel('watch', 'serve'))
);

Вот так поднимается сервер, который в каждый отдаваемый html-файл вставялет скрипт (слежения)

In [ ]:

gulp.task('serve', function() {
  browserSync.init({
    server: 'public'
  }); 

Детали того, как он это делает можно изменить в snippet options

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

In [ ]:

browserSync.init()

А можно использовать проксирование . Т.е., браузер подключается к browser-sync, а тот отправляет запросы на backend. Потом получает html-страницу и вставляет туда скрипт...

In [ ]:

browserSync.watch('public/**/*.*').on('change', browserSync.reload);

Похож на Gulp, оба используют chokidar, но у каждого своя обертка

In [ ]:

gulp.task('dev',
    gulp.series('build', gulp.parallel('watch', 'serve'))
);

Две задачи слежения должны запускаться параллельно (запомнить!), иначе не будет работать.

В скринкасте ничего нет об доступе к серверу через браузер¶

Вод данные из консоли (несколько дней, как работает localhost:3000, и UI: http://localhost:3001 - можно посмотреть, но я об этом уже писал в предыдущих постах)

In [ ]:

F:\stradorusite\web-starter-kit-0.6.3>gulp serve
[14:42:03] Requiring external module babel-register
[14:42:19] Using gulpfile F:\stradorusite\web-starter-kit-0.6.3\gulpfile.babel.js
[14:42:19] Starting 'scripts'...
[14:42:20] Starting 'styles'...
[14:42:40] scripts all files 1.32 kB
[14:42:40] Finished 'scripts' after 22 s
[14:42:42] styles all files 3 kB
[14:42:42] Finished 'styles' after 22 s
[14:42:42] Starting 'serve'...
[14:42:42] Finished 'serve' after 260 ms
[WSK] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.56.1:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.56.1:3001
 -------------------------------------

Вот стандартный вывод

In [ ]:

[WSK] Serving files from: .tmp
[WSK] Serving files from: app
[WSK] Reloading Browsers...
[WSK] Reloading Browsers...
[14:59:11] Starting 'styles'...
[14:59:12] styles all files 3 kB
[14:59:12] Finished 'styles' after 1.43 s
[WSK] Reloading Browsers...
[15:00:00] Starting 'styles'...
[15:00:01] styles all files 3 kB
[15:00:01] Finished 'styles' after 1.42 s
[WSK] Reloading Browsers...
[15:02:10] Starting 'styles'...
[15:02:12] styles all files 3 kB
[15:02:12] Finished 'styles' after 1.39 s
[WSK] Reloading Browsers...
[15:02:23] Starting 'styles'...
[15:02:25] styles all files 3 kB
[15:02:25] Finished 'styles' after 1.36 s
[WSK] Reloading Browsers...

Посмотрим на фрагменты кода из WSK (web-starter-kit)¶

Первоисточник web-starter-kit/gulpfile.babel.js

In [ ]:

const reload = browserSync.reload;
...
// Watch files for changes & reload
gulp.task('serve', ['scripts', 'styles'], () => {
  browserSync({
    notify: false,
    // Customize the Browsersync console logging prefix
    logPrefix: 'WSK',
    // Allow scroll syncing across breakpoints
    scrollElementMapping: ['main', '.mdl-layout'],
    // Run as an https by uncommenting 'https: true'
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    server: ['.tmp', 'app'],
    port: 3000
  });

  gulp.watch(['app/**/*.html'], reload);
  gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
  gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]);
  gulp.watch(['app/images/**/*'], reload);
});

// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], () =>
  browserSync({
    notify: false,
    logPrefix: 'WSK',
    // Allow scroll syncing across breakpoints
    scrollElementMapping: ['main', '.mdl-layout'],
    // Run as an https by uncommenting 'https: true'
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    server: 'dist',
    port: 3001
  })
);

// Build production files, the default task
gulp.task('default', ['clean'], cb =>
  runSequence(
    'styles',
    ['lint', 'html', 'scripts', 'images', 'copy'],
    'generate-service-worker',
    cb
  )
);

Посты чуть ниже также могут вас заинтересовать