Gulp - 实时重新加载

实时重新加载指定文件系统中的更改。每当文件更改时，将使用 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 的任务之前，需要使用包管理器安装插件，并在配置文件中写入依赖项，如本章节所定义。

配置完成后，同时运行 BrowserSync 和 watchTask 来实现实时重新加载效果。我们将同时运行这两个命令行，而不是单独运行，通过在 watchTask 中添加 browserSynctask 来实现，如下面代码所示。

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: https://127.0.0.1:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: https://127.0.0.1:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

它将使用 URL https://127.0.0.1:3000/ 打开浏览器窗口。对 CSS 文件进行的任何更改都将反映在命令提示符中，浏览器也会自动重新加载并应用更改后的样式。

打印页面