TypeScript browser-sync.default函数代码示例

function startLocalhost() {
  return browserSync(null, {
    server: {
      baseDir: ['tmp/serve']
    }
  })
}

gulp.task('serve:prod', ['build:prod'], () => {
    // Proxy to localhost:8080
    var proxyOptions = url.parse('http://localhost:8080/api');
    proxyOptions.route = '/api';
    proxyOptions.preserveHost = true;

    browserSync({
        logPrefix: 'VASS Angular2 Test',
        port: 5000,
        browser: 'google chrome',
        server: {
            baseDir: './dist',
            middleware: [function (req, res, next) {
                // CORS Origin....
                    res.setHeader('Access-Control-Allow-Origin', '*');
                    next();
                }, proxy(proxyOptions)]
        }
    });

    // Watch for changes on build folder. A change on src folder will make watch task run.
    // This task will put the files on build folder.
    // So, we ahve to watch on build folder to reload the browser 
    gulp.watch([
        "/build/**/*.js",
        "/build/**/*.css",
        "/build/**/*.html"
    ], browserSync.reload);
});

gulp.task('serve', function () {
    browserSync({
        server: {
            baseDir: 'build',
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    }, function (err, bs) {
        console.log(bs.options.getIn(['urls', 'local']));
    });

    gulp.run('watch');
    gulp.watch('private/*.scss', ['scss']);
    gulp.watch(['build/**/*.html', 'build/**/*.js']).on('change', browserSync.reload);
});

gulp.task('dev', () => {
	browserSync({
	    port: 3002,
	    file: ['index.html', '**/*.js', '**/*.ts', '**/*.html', '**/*.less'],
	    injectChange: true,
	    logFileChange: false,
	    logLevel: 'silent',
	    notify: true,
	    reloadDelay: 0,
	    server: {
		    baseDir: './',
		    middleware: superstatic({debug: false})
	    }
  	});
  	// gulp.watch(['app/**/*.less', 'app/**/*.html', 'app/**/*.ts', 'app/**/*.js', 'index.html'], ['reload']);
});

function startBrowserSync(isDev: boolean, isSpecRunner: boolean): void{
    'use strict';
     var tunnel = null;
    var online = false;
     if (args.nosync || browserSync.active) {
        return;
    };
    if (args.online) {
        tunnel = config.subdomain;
        online = true;
    }
    console.log('Starting browser-sync on port ' + port);
    if (isDev) {
        gulp.watch([config.less, config.sourceTs, config.sourceHtmls], ['serve-dev', browserSync.reload])
            .on('change', changeEvent);
         gulp.watch([config.sourceSpecs], ['compile-specs', browserSync.reload])
            .on('change', changeEvent);
    } else {
         gulp.watch([config.less, config.sourceTs, config.sourceHtmls], ['optimize', browserSync.reload])
            .on('change', changeEvent);
         gulp.watch([config.sourceSpecs], ['compile-specs', browserSync.reload])
            .on('change', changeEvent);
    }
    var options = {
        proxy: 'localhost:' + port,
        port: 3000,
        files: isDev ? [
            config.build + '**/*.*',
            config.temp + '**/*.css'
        ] : [],
        ghostMode: true,
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'Acklen Avenue',
        notify: true,
        reloadDelay: 5000,
        startPath: null,
        tunnel: tunnel,
        online: online
    };
    if (isSpecRunner) {
        options.startPath = config.specRunnerFile;
    }
     browserSync(options);

}

export = gulp.task('serve', () => {
  browsersync(config.browsersync);
});

export const create = (opts: IOptions) => browserSync(createBrowserSyncOptions(opts));