How to use browser-sync - 10 common examples

.on('error', function(err){
      browserSync.notify("SASS error");

      console.error(err.message);

      // Save the error to index.html, with a simple HTML wrapper
      // so browserSync can inject itself in.
      fs.writeFileSync('serve/index.html', "<pre>" + err.message + "</pre>");

      // No need to continue processing.
      this.emit('end');
    })
    // AutoPrefix your CSS so it works between browsers

gulp.task('browsersync', function (cb) {
	
	verbose(chalk.grey('Running task "browsersync"'));
	console.log(chalk.grey('Launching server...'));

	// Grab the event emitter and add some listeners
	var evt = browserSync.emitter;
	evt.on('init', bsInitHandler);
	evt.on('service:running', bsRunningHandler);

	// Serve files and connect browsers
	browserSync.init(null, {
		server:         _.isUndefined(config.proxy) ? {
							baseDir: config.export_templates
						} : false,
		logConnections: false,
		logLevel:       'silent', // 'debug'
		browser:        config.browser || 'default',
		open:           isOpen,
		port:           config.port || 3000,
		proxy:          config.proxy || false,
		tunnel:         isTunnel || null
	}, function (err, data) {

await new Promise((resolve, reject) =>
    browserSync.create().init(
      {
        // https://www.browsersync.io/docs/options
        server: 'src/server.js',
        middleware: [server],
        port: config.port,
        open: !process.argv.includes('--silent'),
        ...(DEBUG ? {} : { notify: false, ui: false }),
      },
      (error, bs) => (error ? reject(error) : resolve(bs)),
    ),
  );

#!/usr/bin/env node

'use strict';

const demosymbol = '+DEMO';

// external libraries
const express = require('express');
const server = express();
const fs = require('fs');
const path = require('path');
const parse = require('minimist');
const bs = require('browser-sync').create();
const internalPort = 61426;
const pj = require('../package.json');

const showHelp = function() {
    console.log('');
    console.log('Usage:');
    console.log('');
    console.log('    node d3-wb-server.js -i WORKBENCH [OPTIONS...]');
    console.log('    npm start -- -i WORKBENCH [OPTIONS...]');
    console.log('');
    console.log('    -i WORKBENCH    Path to your workbench folder.' +
        ' Use +DEMO for example content.');
    console.log('');
    console.log('Optional arguments:');
    console.log('');
    console.log('    -p PORT         Server port. Defaults to 50321.');

var fs = require('fs-extra')
var path = require('path')
var bs = require('browser-sync').create()
var buble = require('buble')
var chalk = require('chalk')
var UglifyJS = require('uglify-js')
var cheerio = require('cheerio')

module.exports = function() {

	console.log(chalk.green('Serving current block:'))

	// Watch index.html and reload.
	bs.watch(path.join(process.cwd(), 'index.html')).on('change', bs.reload)

	// Watch script.js, compile, uglify, inline, and reload.
	bs.watch(path.join(process.cwd(), 'script.js'), function (event, file) {
		if (event === 'change') {

// Report compile errors
        .on('error', notify.onError({
          title: "JS Compile Error",
          message: "<%= error.message %>"
        }))
        // Use vinyl-source-stream to make the
        // stream gulp compatible. Specify the
        // desired output filename here.
        .pipe(source(bundleConfig.outputName))
        .pipe(buffer())
          .pipe(sourcemaps.init()) // loads map from browserify file
          .pipe(sourcemaps.write('./')) // writes .map file
        // Specify the output destination
        .pipe(gulp.dest(bundleConfig.dest))
        .on('end', reportFinished)
        .pipe(browserSync.reload({stream:true}));
    };

var server = {
    baseDir: baseDir,
    routes: routes
  };

  /*
   * You can add a proxy to your backend by uncommenting the line below.
   * You just have to configure a context which will we redirected and the target url.
   * Example: $http.get('/users') requests will be automatically proxified.
   *
   * For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md
   */
  // server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true});

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser
  });
}

function browserSyncInit(baseDir, files, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if (baseDir === 'src' || (util.isArray(baseDir) && baseDir.indexOf('src') !== -1)) {
    routes = {
      // Should be '/bower_components': '../bower_components'
      // Waiting for https://github.com/shakyShane/browser-sync/issues/308
      '/bower_components': 'bower_components',
      '/data': 'data'
    };
  }

  browserSync.instance = browserSync.init(files, {
    startPath: '/',
    server: {
      baseDir: baseDir,
      middleware: middleware,
      routes: routes
    },
    browser: browser
    //logLevel: 'debug'
  });

}

function server (done) {
  browserSync.init({
    server: PATHS.dist, port: PORT, open: false
  }, done)
}
// Reload the browser with Browsersync

gulp.task('docs', ['docs:generate'], function() {
	browserSync.use(browserSyncSpa({
		selector: '[ng-app]' // Only needed for angular apps
	}));

	browserSync.instance = browserSync.init({
		startPath: '/',
		server: {
			baseDir: './' + conf.paths.docs
		},
		port: 3010,
		browser: 'default'
	});
	gulp.watch(path.join(conf.paths.src, '/**/*.js'), function(event) {
		gulp.start('docs:generate');
		browserSync.reload(event.path);
	});
});