BrowserSync not working running through gulpfile.js Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of BrowserSync not working running through gulpfile.js without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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.

We are here to answer your question about BrowserSync not working running through gulpfile.js - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji