Laravel Mix BrowserSync It is not triggered - laravel

Question

According to the Laravel Mix documents. I'm using Webpack to compile styles and launch BrowserSync in the process.
This is my complete webpack.mix.js document. You can see browserSync on line 92:
require('laravel-mix-merge-manifest');
const fs = require('fs');
const mix = require('laravel-mix');
const pathEnv = 'resources/sass/_enviroments/' + process.env.NODE_ENV;
const sites = [
'RP-ES',
'TZ-ES',
'CAL-ES',
'RUP-ES',
'FL-ES',
'SP-ES',
'WPX-IT',
'WPX-UK',
'WPX-CH',
'WPX-FR',
'WPX-DE',
'WPX-PT',
'WPX-NL',
'MTN-ES',
'MTN-DE',
'MTN-FR'
];
const tmpFiles = [];
try
{
if (process.env.NODE_ENV == 'development')
{
if (!process.env.hasOwnProperty('npm_config_only_css'))
generateJS();
if (!process.env.hasOwnProperty('npm_config_only_js'))
{
if (!process.env.hasOwnProperty('npm_config_site'))
{
// throw('In development, parameter "--site" is mandatory, one of the follow values: "'+sites.join('", "')+'"');
sites.forEach(slug=>{
generateSiteCss(slug)
});
}
else
generateSiteCss(process.env.npm_config_site);
}
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
mix.webpackConfig({plugins: [new BundleAnalyzerPlugin()]});
}
else
{
generateJS();
sites.forEach(slug=>{
generateSiteCss(slug)
});
}
mix.version()
mix.mergeManifest()
mix.then(deleteTmpFiles);
}
catch(e)
{
deleteTmpFiles();
throw e;
}
function generateJS()
{
console.log('Generating JS...');
// app scripts (common in all pages)
mix.js('resources/js/app.js', 'public/js')
.extract()
// individual scripts (auto register) to use alone en certain pages
.js('resources/js/components/helpcenter_results.vue.js', 'public/js/vue_components') // used in helpcenter
.js('resources/js/components/newsletter.vue.js', 'public/js/vue_components') // used in home
.js('resources/js/components/slick_carousel.vue.js', 'public/js/vue_components') // used in product pages & designs list
.js('resources/js/components/vue_tab.vue.js', 'public/js/vue_components') // used in login
// combined components with auto register included
.js('resources/js/products_page.js', 'public/js')
.js('resources/js/checkout.js', 'public/js')
.js('resources/js/payment_methods.js', 'public/js')
.js('resources/js/cart.js', 'public/js')
.js('resources/js/products_list.js', 'public/js')
.js('resources/js/accounts.js', 'public/js')
// required libs that are used in certain pages and are not available througth npm
.copyDirectory('resources/js/libs','public/js/libs')
.copyDirectory('resources/fonts','public/fonts')
.copyDirectory('resources/css','public/css')
.browserSync('regalospersonales.local');
}
function generateSiteCss(slug)
{
console.log('Generating CSS for the site: '+ slug +'...');
let pathSite = `resources/sass/_sites/${slug}`;
let outputPath = `public/css/sites/${slug}`;
let tmpPath = `resources/sass/${slug}`;
let includePaths = [
pathEnv,
pathSite
];
fs.writeFileSync(`${tmpPath}_common.scss`, `#import '_common';`);
fs.writeFileSync(`${tmpPath}_helpcenter.scss`, `#import '_helpcenter';`);
tmpFiles.push(`${tmpPath}_common.scss`);
tmpFiles.push(`${tmpPath}_helpcenter.scss`);
mix.sass(`${tmpPath}_common.scss`, `${outputPath}/common.css`, { includePaths: includePaths })
.sass(`${tmpPath}_helpcenter.scss`, `${outputPath}/helpcenter.css`, { includePaths: includePaths })
//.then(deleteTmpFiles)
//console.log(result);
//throw new Exception('asdfasdf');
}
function deleteTmpFiles(){
console.log('Deleting temporal files...');
tmpFiles.forEach(f=>{
if (fs.existsSync(f))
fs.unlinkSync(f);
});
}
And of course I have sync browser installed with my package.json:
"devDependencies": {
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.1",
Everything looks good. But when I execute:
npm run watch
All my styles and javascript are compiled, watch is activated but it doesn't say anything about BrowserSync.
No error or anything happens, it's like BrowserSync is ignored.
What's going on?