1. WIKI教程
2. 学习Gulp
3. Gulp - Live Reload( Live Reload)

Gulp - Live Reload( Live Reload)

Live Reload指定文件系统中的更改。 BrowserSync用于监视CSS目录中的所有HTML和CSS文件，并在文件更改时对所有浏览器中的页面执行实时重新加载。 BrowserSync通过跨多个设备同步URL，交互和代码更改，使工作流程更快。

安装BrowserSync插件

BrowserSync插件提供跨浏览器的CSS注入，可以使用以下命令进行安装。

npm install browser-sync --save-dev

配置BrowserSync插件

要使用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创建任务之前，您需要使用包管理器安装插件，并在配置文件中编写依赖关系，如chapter所定义。

完成配置后，运行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文件所做的任何更改都将反映在命令提示符中，并且浏览器会自动使用更改的样式重新加载。