Не работает browserSync.stream() в gulp?

Question

[quiplunar]

spoiler

const del = require('del')
const gulp = require('gulp')
const glob = require('glob')
const sass = require('gulp-sass')
const {src, dest} = require('gulp')
const rename = require('gulp-rename')
const flatten = require('gulp-flatten')
const handlebars = require('gulp-compile-handlebars')
const tildeImporter = require('node-sass-tilde-importer')
const autoprefixer = require('gulp-autoprefixer')
const groupMedia = require('gulp-group-css-media-queries')
const sourcemaps = require('gulp-sourcemaps')
const imagemin = require('gulp-imagemin')
const webpack = require('webpack')
const webpackStream = require('webpack-stream')
const {TsconfigPathsPlugin} = require('tsconfig-paths-webpack-plugin')
const browserSync = require('browser-sync').create

function browser() {
  browserSync().init({
    server: {
      baseDir: './dist/'
    },
    port: 3000
  })
}

function hbs() {
  const options = {
    compile: {
      noEscape: true
    },
    batch : [
      ...glob.sync('./src/components/*').map($glob => $glob),
      ...glob.sync('./src/pages/*').map($glob => $glob)
    ],
  }

  return src('./src/pages/*/[!_]*.hbs')
    .pipe(handlebars(null, options))
    .pipe(flatten({includeParents: 0}))
    .pipe(rename(path => path.extname = '.html'))
    .pipe(dest('./dist'))
    .pipe(browserSync.stream())
}

function scss() {
  const optSass = {
    outputStyle: 'expanded',
    includePaths: ['./src'],
    importer: tildeImporter
  }

  const optAutoprefixer = {
    cascade: false
  }

  return src('./src/static/styles/styles.scss')
    .pipe(sourcemaps.init())
      .pipe(sass(optSass).on('error', sass.logError))
      .pipe(groupMedia())
      .pipe(autoprefixer(optAutoprefixer))
    .pipe(sourcemaps.write('/'))
    .pipe(dest('./dist/css'))
    .pipe(browserSync.reload({ stream: true }))
}

function ts() {
  return src('./src/static/typescript/main.ts')
    .pipe(webpackStream(webpackConfig(), webpack))
    .pipe(dest('./dist/js'))
    .pipe(browserSync.reload({ stream: true }))
}

function assets() {
  const options = [
    imagemin.mozjpeg({ progressive: true }),
    imagemin.optipng({ optimizationLevel: 3 }),
  ]

  return src('./src/assets/**')
    .pipe(imagemin(options))
    .pipe(dest('./dist/assets'))
    .pipe(browserSync.reload({ stream: true }))
}

function misc() {
  return src('./src/static/misc/**')
    .pipe(dest('./dist'))
    .pipe(browserSync.reload({ stream: true }))
}

function clean() {
  return del('./dist')
}

function webpackConfig() {
  return {
    mode: 'development',
    output: {
      filename: 'main.js'
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: ['babel-loader']
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js'],
      plugins: [
        new TsconfigPathsPlugin({configFile: 'tsconfig.json'})
      ]
    },
    devtool: 'source-map',
    target: 'web'
  }
}

const build = gulp.series(clean, gulp.parallel(hbs))
const server = gulp.parallel(build, browser)

exports.server = server
exports.default = build

Не работает browserSync.stream() и browserSync.reload({ stream: true }). Выбрасывает ошибки, не пойму в чем дело((

TypeError: browserSync.stream is not a function

TypeError: browserSync.reload is not a function

Answer 1

[bingumd]

может надо так?

const browserSync = require('browser-sync').create()

Comments

[quiplunar]

Да, спасибо большое!) Вы мой спаситель!) Очень благодарен вам!)