Home

Index

How to use the init function from browser-sync

Find comprehensive JavaScript browser-sync.init code examples handpicked from public code repositorys.

browser-sync.init is a JavaScript function that launches a live-reload server for web development and synchronization of browser actions across multiple devices.

gulpfile.js

-1

291

sync.js

GitHub: reflex-app/reflex

7
8
9
10
11
12
13
14
15
16
export function startServer (url) {
  return new Promise((resolve, reject) => {
    SITE_URL = url || 'https://shift.nickwittwer.com/'
    const needsHTTPS = SITE_URL.includes('https://')

    bs.init(
      {
        proxy: {
          target: SITE_URL
        },

How does browser-sync.init work?

browser-sync.init works by launching a local web server that serves static files and supports live-reload functionality, as well as synchronization of browser actions across multiple devices. The function takes a configuration object as input, which can be used to customize the behavior of the server and enable various features such as file watching, CSS injection, and external URL access. Once the server is launched, it monitors the specified files and directories for changes, and triggers a reload of the browser when changes are detected. It also provides a range of features to help streamline the development process, such as support for CSS pre-processors, customizable logging, and customizable injection of scripts and styles. By providing a convenient and reliable way to launch a live-reload server, browser-sync.init can help to streamline the development and testing process for web applications.

gulpfile.js

GitHub: IgniteUI/igniteui-docfx

145
146
147
148
149
150
151
152
153
154
155
      series(build, browserSyncReload));
    done();
}


const init = (done) => {
    browserSync.init({
        server: {
            baseDir: `${DOCFX_SITE}`
        },
        notify: {

+ 18 other calls in file

Gulpfile.js

GitHub: PacktPublishing/Bootstrap-4-Site-Blueprints

11
12
13
14
15
16
17
18
19
20
var port = process.env.SERVER_PORT || 8080;
var bowerpath = process.env.BOWER_PATH || 'bower_components/';

// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
  browser.init({server: './_site', port: port});
});

// Watch files for changes
gulp.task('watch', function() {

Ai Example

1
2
3
4
5
6
7
8
9
const browserSync = require("browser-sync").create();

// Launch the server and watch for changes to HTML, CSS, and JavaScript files
browserSync.init({
  server: {
    baseDir: "./dist",
  },
  files: ["./dist/*.html", "./dist/*.css", "./dist/*.js"],
});

In this example, we use browser-sync.init to launch a live-reload server and watch for changes to HTML, CSS, and JavaScript files in the ./dist directory. We pass a configuration object to browserSync.init, which specifies the base directory for the server (./dist) and the files to watch for changes. Once the server is launched, it will automatically reload the browser whenever changes are made to any of the watched files. This can help streamline the development process and save time by eliminating the need to manually refresh the browser every time changes are made.

task.js

GitHub: simo73/Webiny

144
145
146
147
148
149
150
151
152
153
    this.initHttpServer();

    // Return a promise which never resolves. It will keep the task running until you abort the process.
    return new Promise(() => {
        Webiny.info('Building apps...');
        browserSync.init(bsConfig);
    });
}

initHttpServer() {

sync.js

GitHub: markserv/markserv-cli

4
5
6
7
8
9
10
11
12
13
let serverInstance = false

const start = syncConfig => {
    log.trace('Initiating browserSync')
    log.trace(syncConfig)
    browserSync.init(syncConfig)
    serverInstance = browserSync.create()
    // serverInstance = browserSync.create('Server1')
    return serverInstance
}

gulpfile.js

GitHub: SteveJobsYoung/699545-sedona-16

91
92
93
94
95
96
97
98
99
100
101
  "sprite",
  "html"
));


gulp.task("server", function () {
  server.init({
    server: "build/",
    notify: false,
    open: true,
    cors: true,

gulpfile.js

GitHub: glitchworker/aislewire

605
606
607
608
609
610
611
612
613
614
615
616
// Local & API & Git server Settings
// ローカル & API & Git サーバー設定
//------------------------------------------------------


// browserSync init
const browserSyncInit = () => bs.init(null, browserSyncConfig, browserSyncCallbacks)


// apiServer init
const apiServerInit = () => apiServer = jsonServer.create(apiServerConfig)

+ 3 other calls in file

gulpfile.js

GitHub: tannerjfisher/northern_theme

238
239
240
241
242
243
244
245
246
247
    browserSyncConfig = null;
  }
}

if (browserSyncConfig) {
  browserSync.init(browserSyncConfig);
}

gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
gulp.watch(['src/scripts/js/**/*.js', '!src/scripts/js/**/*.webpack.js'], gulp.series('js'));

gulpfile.js

GitHub: hiphopappotamus/fun-sandbox-template

158
159
160
161
162
163
164
165
166
167
168
      ------------------
       THE KITCHEN SYNC
      . . . . . . . . .
    =====================
  `);
  browserSync.init(cfg.browserSyncOptions);


  done();
}

+ 7 other calls in file

gulpfile.js

GitHub: otter254/portfolio

164
165
166
167
168
169
170
171
172
173
174
175
setting.browsersync.rewriteRules = browserSyncRewriteRules


/**
 * sync
 */
const sync = () => browserSync.init(setting.browsersync)


/**
 * reload
 * @param {function} cb

gulpfile.js

GitHub: LePinkman/gsap_exercice2

98
99
100
101
102
103
104
105
106
107
108


/**
 * BrowserSync
 */
const browserSync = (done) => {
    browserSyncServer.init({
        server: {
          baseDir: "./dist"
        },
        port: 3000

+ 13 other calls in file

agnostic-bundler.js

GitHub: PaulWeinsberg/agnostic-bundler

205
206
207
208
209
210
211
212
    await build(esbuildEntries, sassEntries, copyEntries);
    if (args['--watch']) {
        for (const entry of [...entries, ...vendorsEntries]) {
            fs.watchFile(entry, { interval: 1000, persistent: true }, watchHandler.bind(this, entry));
        }
        browserSync.init((_a = Config.browserSync) !== null && _a !== void 0 ? _a : {});
    }
})();

+ 15 other calls in file

cli.js

GitHub: TMBR/tmbr-bundler

100
101
102
103
104
105
106
107
108
109
110
    await watcher.rebuild();
    await builder.rebuild();
    process.exit();
  }


  server.init(serveOptions, () => {
    builder.watch();
    watcher.watch();
  });
}

dev.js

GitHub: Khayotbek1/marmelad

562
563
564
565
566
567
568
569
570
  },
];

bsSP.use(require('../modules/browser-sync/screen-message'));

bsSP.init(settings.app.bsSP, () => {
  // let urls = bsSP.getOption('urls');
  // let bsAuth = bsSP.getOption('bsAuth');
  // let authString = '';

gulpfile.js

GitHub: Jey24012000/users-system

24
25
26
27
28
29
30
31
32
33
34
  '\n'
].join('');


// BrowserSync
function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./"
    },
    port: 3000

gulpfile.js

GitHub: celsrami/cocktail-search-celsrami

110
111
112
113
114
115
116
117
118
119
120
// main tasks


gulp.task(
  'default',
  gulp.series(['clean', 'api', 'html', 'css', 'js', 'images'], done => {
    browserSync.init({ server: { baseDir: './public/' } });
    gulp.watch(config.api.src, gulp.series(['api', 'bs-reload']));
    gulp.watch(config.css.src, gulp.series('css'));
    gulp.watch(config.images.src, gulp.series(['images', 'bs-reload']));
    gulp.watch(config.js.src, gulp.series(['js', 'bs-reload']));

gulpfile.js

GitHub: joedemartinez/myPortfolio.github.io

110
111
112
113
114
115
116
117
118
119
120
    browserSync.reload();
});


/* Prepare Browser-sync for localhost */
gulp.task('browser-sync', function() {
    browserSync.init(['css/*.css', 'js/*.js'], {
        
        proxy: 'localhost/probootstrap/pixels'
        /* For a static server you would use this: */
        /*

server.js

GitHub: manhdg98/Docsify_man

73
74
75
76
77
78
79
80
81
82

// Set TEST_HOST environment variable
process.env.TEST_HOST = `http://${serverConfig.hostname}:${serverConfig.port}`;

// Start server
browserSync.init(
  // Config
  {
    ...defaults,
    ...options,

cordova.js

GitHub: raghavendra1207/fuel_delivery

62
63
64
65
66
67
68
69
70
71
    baseDir: ['app', '.tmp'].concat([patcher.wwwPath]),
    // add platform www's for cordova.js
  }
};

bs.init(bsOptions, function (err, bsInstance) {
  if (err) {
    console.log(err);
  }
  var urls = bsInstance.options.getIn(['urls']);

Other functions in browser-sync

Sorted by popularity

browser-sync.init is the most popular function in browser-sync (523 examples)

Other popular packages:

Home

About