How to temporarily disable browsersync?

Question

How can I temporarily disable browsersync, so that it doesn't inject/modify HTML pages? (For testing and debugging.)

Answer 1

There doesn't seem to be a configuration option to do just this, but one hacky workaround is to use snippetOptions to specify a string that will will never be found in the HTML:

snippetOptions: {
  rule: {
    match: /qqqqqqqqq/
  }
}

If this string cannot be found in the HTML, the snippet will never be injected, and browsersync will be inert.

Answer 2

You can use Yargs to send parameters and enable or disable 'watch' task.

Remember this command line to install required components:
npm i --save gulp browser-sync yargs runSequence

On gulpfile.js file:

browserSync.init({
    port: 80,
    notify: false,
    cors: true,
    browser: 'chrome',
    open: 'local'
});

gulp.task('watch', ['browserSync'], function (){
    gulp.watch('dev/*.html', browserSync.reload); 
    gulp.watch('dev/**/*.js', browserSync.reload);
    gulp.watch('dev/**/*.css', browserSync.reload); 
});

gulp.task('default', function(callback) {
    var sequence = ['browserSync'];
    if (args.sync){
        sequence.push('watch')
    }

    runSequence(sequence,callback);
});

This if (args.sync) lines use truthy/falsy searching for sync values and enable/disable 'watch' task.

BrowserSync with watch:
gulp --sync true

BrowserSync without watch:
gulp or gulp --sync false