How to use browser-sync

Comprehensive browser-sync code examples:

How to use browser-sync.instance:

22
23
24
25
26
27
28
29
30
31

const path = context.initialOptions.outdir;
const slug = Object.keys(context.initialOptions.entryPoints)[0];

context.onStart(() => {
  server.instance.active && server.info();
});

context.onEnd(result => {
  if (result.warnings.length || result.errors.length) return console.log('\007');

How to use browser-sync.notify:

25
26
27
28
29
30
31
32
33
34
function js() {
    return bundler
        .bundle()
        .on('error', function handleError(err) {
            gutil.log(err.message);
            bs.notify(err.message, 10000);
            this.emit('end');
        })
        .pipe(source(config.paths.appName))
        .pipe(buffer())

How to use browser-sync.stream:

212
213
214
215
216
217
218
219
220
221
222
        cssDeclarationSorter({ order: 'smacss' })
      ])
    )
    .pipe(replace('?rev', `?ver=${Date.now()}`)) // キャッシュ
    .pipe(gulp.dest(setting.io.output.css, { sourcemaps: '/maps' }))
    .pipe(gulpif(browserSync.active === true, browserSync.stream()))
}


/**
 * scssProduction

How to use browser-sync.watch:

24
25
26
27
28
29
30
31
32
33
34
module.exports = function ({ port, theme, silent, dir, resumeFilename }) {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir);
  }


  bs.watch(resumeFilename).on('change', () => {
    reBuildResume(theme, dir, resumeFilename, () => {
      bs.reload();
    });
  });

How to use browser-sync.use:

82
83
84
85
86
87
88
89
90
91
});

/**
 * Server Auth
 */
bsSP.use(require('bs-auth'), {
  user: authArgs(opts.auth, pkg.name)[0],
  pass: authArgs(opts.auth, pkg.name)[1],
  use: opts.auth,
});

How to use browser-sync.sockets:

162
163
164
165
166
167
168
169
170
171

    done();
  });

  stream.on('error', (error) => {
    bsSP.sockets.emit('error:message', error);
    console.log(error);
    done(error);
  });
});

How to use browser-sync.exit:

67
68
69
70
71
72
73
74
75
76

// Change the Proxy URL
export async function changeURL (newURL) {
  async function checkServerStatus () {
    function exitServer () {
      bs.exit() // Exit current instance
    }

    // Close the server
    exitServer()

How to use browser-sync.emitter:

254
255
256
257
258
259
260
261
262
263
gulp.watch(['previewer-src/**', 'patterns.yaml'], () => {
  reset();
  gulp.series('generate-preview-force', outputDevServerInfo)
});

browserSync.emitter.on('init', outputDevServerInfo);

browserSync.init({
  logLevel: 'silent',
  ui: false,

How to use browser-sync.get:

38
39
40
41
42
43
44
45
46
47
            server: proxy ? null : { baseDir: 'build_' + env + '/' },
        },
        {
            reload: false,
            callback: function() {
                browserSyncInstance = BrowserSync.get('bs-webpack-plugin');
            },
        })
    },
};

How to use browser-sync.getOption:

21
22
23
24
25
26
27
28
29
30
// reloadOnRestart: true,
// logLevel: process.env.NODE_ENV !== 'production' ? 'debug' : '',
callbacks: {
  ready: () => {
    try {
      PROXY_SERVER_URL = bs.getOption('urls').get('local') // Options: local, external, ui, ui-external

      resolve({
        site: SITE_URL,
        proxy: PROXY_SERVER_URL

How to use browser-sync.create:

39
40
41
42
43
44
45
46
47
48
    watchFiles: [],
    whitelist: [],
    blacklist: [],
    ...Manifest.browserSync,
  }
  Manifest.browserSyncInstance = browserSync.create()
}

module.exports = {
  getDirectoryName (resourceType) {

How to use browser-sync.reload:

244
245
246
247
248
249
250
251
252
253
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/css'))
    // Reloading the stream
    .pipe(
      browserSync.reload({
        stream: true,
      })
    )
)

How to use browser-sync.init: