Live Reload指定文件系统中的更改. BrowserSync 用于监视CSS目录中的所有HTML和CSS文件，并在文件更改时对所有浏览器中的页面执行实时重新加载. BrowserSync通过在多个设备之间同步URL，交互和代码更改来加快工作流程.
BrowserSync插件提供跨浏览器CSS注入，可以使用以下命令安装.
npm install browser-sync --save-dev
要使用BrowserSync插件，您需要在配置文件中编写依赖项，如以下命令所示.
var browserSync = require('browser-sync').create();您需要为 BrowserSync 创建任务以使用Gulp与服务器配合使用.由于您正在运行服务器，因此您需要关于服务器的根目录通知BrowserSync.在这里，我们使用基目录作为'build'.
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'build'
},
})
})您还可以使用CSS文件的以下任务将新样式注入浏览器.
gulp.task('styles', function() {
gulp.src(['src/styles/*.css'])
.pipe(concat('style.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('build/styles/'))
.pipe(browserSync.reload({
stream: true
}))
});在为BrowserSync创建任务之前，您需要使用包管理器安装插件，并在配置文件中编写依赖项，如章节.
完成配置后，运行BrowserSync和watchTask以发生实时重新加载效果.我们将通过添加 browserSynctask 和watchTask来运行它们，而不是单独运行两个命令行，如下面的代码所示.
gulp.task('default', ['browserSync', 'styles'], function (){
gulp.watch('src/styles/*.css', ['styles']);
});在项目目录中运行以下命令以执行上述组合任务.
gulp
使用上述命令运行任务后，您将在命令提示符下获得以下结果.
C:\project>gulp [13:01:39] Using gulpfile C:\project\gulpfile.js [13:01:39] Starting 'browserSync'... [13:01:39] Finished 'browserSync' after 20 ms [13:01:39] Starting 'styles'... [13:01:39] Finished 'styles' after 21 ms [13:01:39] Starting 'default'... [13:01:39] Finished 'default' after 15 ms [BS] 1 file changed (style.css) [BS] Access URLs: ------------------------------------ Local: http://localhost:3000 External: http://192.168.1.4:3000 ------------------------------------ UI: http://localhost:3001 UI External: http://192.168.1.4:3001 ------------------------------------ [BS] Serving files from: build
它将打开浏览器窗口，其URL为 http://localhost: 3000/的.对CSS文件所做的任何更改都将反映在命令提示符中，浏览器会自动使用更改的样式重新加载.
