📅 最后修改于: 2020-10-25 06:23:50 🧑 作者: Mango
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文件所做的任何更改都会反映在命令提示符中，并且浏览器会使用更改后的样式自动重新加载。