bs-config.js

/*
 |--------------------------------------------------------------------------
 | Browser-sync config file
 |--------------------------------------------------------------------------
 |
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 |
 | There are more options than you see here, these are just the ones that are
 | set internally. See the website for more info.
 |
 |
 */
const webpack = require( 'webpack' );
const webpackDevMiddleware = require( 'webpack-dev-middleware' );
const webpackHotMiddleware = require( 'webpack-hot-middleware' );
const config = require( './webpack.config.js' );
const compiler = webpack( config );
// need to convert passed variable to boolean
const WRITE_TO_DISK = ( process.env.WRITE_TO_DISK === 'true' );
// if we need to write to disk then let's check for hot module updates and not write those
const writeToDisk = ( filePath ) => {
	return /^(?!.*(hot)).*/.test( filePath );
};

// Get the environment port from .wp-env.json
const env = require( './.wp-env.json' );
const port = env.port;

module.exports = {
	ui: {
		port: 3001,
	},
	files: '**/*',
	watchEvents: [ 'change' ],
	watch: true,
	ignore: [
		`./src`,
		`./build/index.js`,
		`./build/index.asset.php`,
		`./build/frontend.js`,
		`./build/frontend.asset.php`,
		'./node_modules',
	],
	single: false,
	watchOptions: {
		ignoreInitial: true,
	},
	server: false,
	proxy: `localhost:${ port }`,
	port: 3000,
	middleware: [
		webpackDevMiddleware( compiler, {
			publicPath: config.output.publicPath,
			path: config.output.path,
			writeToDisk,
			stats: {
				colors: true,
			},
		} ),
		webpackHotMiddleware( compiler ),
	],
	serveStatic: [],
	ghostMode: {
		clicks: true,
		scroll: true,
		location: true,
		forms: {
			submit: true,
			inputs: true,
			toggles: true,
		},
	},
	logLevel: 'info',
	logPrefix: 'Browsersync',
	logConnections: false,
	logFileChanges: true,
	logSnippet: true,
	rewriteRules: [],
	open: 'local',
	browser: 'default',
	cors: false,
	xip: false,
	hostnameSuffix: false,
	reloadOnRestart: false,
	notify: false,
	scrollProportionally: true,
	scrollThrottle: 0,
	scrollRestoreTechnique: 'window.name',
	scrollElements: [],
	scrollElementMapping: [],
	reloadDelay: 0,
	reloadDebounce: 500,
	reloadThrottle: 0,
	plugins: [],
	injectChanges: true,
	startPath: null,
	minify: true,
	host: null,
	localOnly: false,
	codeSync: true,
	timestamps: true,
	clientEvents: [
		'scroll',
		'scroll:element',
		'input:text',
		'input:toggles',
		'form:submit',
		'form:reset',
		'click',
	],
	socket: {
		socketIoOptions: {
			log: false,
		},
		socketIoClientConfig: {
			reconnectionAttempts: 50,
		},
		path: '/browser-sync/socket.io',
		clientPath: '/browser-sync',
		namespace: '/browser-sync',
		clients: {
			heartbeatTimeout: 5000,
		},
	},
	tagNames: {
		less: 'link',
		scss: 'link',
		css: 'link',
		jpg: 'img',
		jpeg: 'img',
		png: 'img',
		svg: 'img',
		gif: 'img',
		js: 'script',
	},
	injectNotification: false,
};