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

它將使用 URL https://:3000/ 開啟瀏覽器視窗。對 CSS 檔案進行的任何更改都將反映在命令提示符中，瀏覽器也會自動重新載入並應用更改後的樣式。