BrowserSync not working running through gulpfile.js

Question

I'm using firefox browser and when run the gulp watch there is no popup of browsersync is connected, is there a plugin needed to run it.

My gulpfile.js is

// Load Gulp...of course var gulp = require( 'gulp' );

// CSS related plugins
var sass         = require( 'gulp-sass' );
var autoprefixer = require( 'gulp-autoprefixer' );
var minifycss    = require( 'gulp-uglifycss' );

// JS related plugins
var concat       = require( 'gulp-concat' );
var uglify       = require( 'gulp-uglify' );
var babelify     = require( 'babelify' );
var browserify   = require( 'browserify' );
var source       = require( 'vinyl-source-stream' );
var buffer       = require( 'vinyl-buffer' );
var stripDebug   = require( 'gulp-strip-debug' );

// Utility plugins
var rename       = require( 'gulp-rename' );
var sourcemaps   = require( 'gulp-sourcemaps' );
var notify       = require( 'gulp-notify' );
var plumber      = require( 'gulp-plumber' );
var options      = require( 'gulp-options' );
var gulpif       = require( 'gulp-if' );

// Browers related plugins
var browserSync  = require( 'browser-sync' ).create();
var reload       = browserSync.reload;

// Project related variables
var projectURL   = 'https://animesh.dev';

var styleSRC     = './src/scss/mystyle.scss';
var styleURL     = './assets/';
var mapURL       = './';

var jsSRC        = './src/js/myscript.js';
var jsURL        = './assets/';

var styleWatch   = './src/scss/**/*.scss';
var jsWatch      = './src/js/**/*.js';
var phpWatch     = './**/*.php';

// Tasks
gulp.task( 'browser-sync', function() {
    browserSync.init({
        proxy: projectURL,
        https: {
            key: '/home/animeshsahu/.valet/Certificates/animesh.dev.key',
            cert: '/home/animeshsahu/.valet/Certificates/animesh.dev.crt'
        },
        injectChanges: true,
        open: false
    });
});

gulp.task( 'styles', function() {
    gulp.src( styleSRC )
        .pipe( sourcemaps.init() )
        .pipe( sass({
            errLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on( 'error', console.error.bind( console ) )
        .pipe( autoprefixer({ browsers: [ 'last 2 versions', '> 5%', 'Firefox ESR' ] }) )
        .pipe( sourcemaps.write( mapURL ) )
        .pipe( gulp.dest( styleURL ) )
        .pipe( browserSync.stream() );
});

gulp.task( 'js', function() {
    return browserify({
        entries: [jsSRC]
    })
    .transform( babelify, { presets: [ 'env' ] } )
    .bundle()
    .pipe( source( 'myscript.js' ) )
    .pipe( buffer() )
    .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
    .pipe( sourcemaps.init({ loadMaps: true }) )
    .pipe( uglify() )
    .pipe( sourcemaps.write( '.' ) )
    .pipe( gulp.dest( jsURL ) )
    .pipe( browserSync.stream() );
 });

function triggerPlumber( src, url ) {
    return gulp.src( src )
    .pipe( plumber() )
    .pipe( gulp.dest( url ) );
}

 gulp.task( 'default', ['styles', 'js'], function() {
    gulp.src( jsURL + 'myscript.min.js' )
        .pipe( notify({ message: 'Assets Compiled!' }) );
 });

 gulp.task( 'watch', ['default', 'browser-sync'], function() {
    gulp.watch( phpWatch, reload );
    gulp.watch( styleWatch, [ 'styles' ] );
    gulp.watch( jsWatch, [ 'js', reload ] );
    gulp.src( jsURL + 'myscript.min.js' )
        .pipe( notify({ message: 'Gulp is Watching, Happy Coding!' }) );
 });

Additionally I'm using valet-linux so I gave browser sync a cerificate. Also to make browsersync working would i require additonal plugin? so will it working?

My output of terminal is:

//this is zsh shell i called just "gulp watch"
➜  hyparticles gulp watch
[10:27:33] Using gulpfile ~/Sites/animesh/wp-content/plugins/hyparticles/gulpfile.js
[10:27:33] Starting 'styles'...
[10:27:33] Finished 'styles' after 22 ms
[10:27:33] Starting 'js'...
[10:27:33] Starting 'browser-sync'...
[10:27:33] Finished 'browser-sync' after 30 ms
[Browsersync] Proxying: https://animesh.dev
[Browsersync] Access URLs:
 ---------------------------------------
       Local: https://localhost:3000
    External: https://192.168.191.1:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.191.1:3001
 ---------------------------------------
[Browsersync] 2 files changed (mystyle.css.map, mystyle.css)
[Browsersync] 2 files changed (myscript.js.map, myscript.js)
[10:27:34] Finished 'js' after 1.25 s
[10:27:34] Starting 'default'...
[10:27:34] Finished 'default' after 3.34 ms
[10:27:34] Starting 'watch'...
[10:27:37] Finished 'watch' after 3.3 s
[Browsersync] Reloading Browsers... (buffered 2 events)

Answer 1

If I'm understanding your question right, it looks like it is running but you've have

open: false

set in your browser-sync task, which would prevent Browsersync from trying to open up the browser (with the 'local' address by default).

You would therefore need to manually connect your browser to the provided localhost:3000 or 192.168.191.1:3000 addresses to see your development site, or connect to localhost:3001 or 192.168.191.1:3001 to see the Browsersync UI, which is the central control interface where you can control connected browsers.

Answer 2

Hmm, yet I have found my own solution, Well I'm proxying a php-nginx server (valet-linux), so I have to manually include this thing inside my pages like this:

<?php
echo <<<HTML
    <script id="__bs_script__">//<![CDATA[
            document.write("<script async src='https://HOST:3000/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
    //]]></script>
HTML;

So the connection established and everything works well.