[試著把切版專案升級到 gulp4.0 吧] Day32 邊開發邊看畫面變動：談 browserSync

11th鐵人賽 gulp

ayugioh2003

2019-10-18 22:24:58

2586 瀏覽

分享至

邊開發邊看畫面變動：談 browserSync

前端開發時除了看程式碼外，當然也會想看到目前的界面長得怎樣以便調整：即時的畫面回饋，能讓開發更方便。而 browserSync 就是一個這樣的東西：建立起一個暫時性的開發用伺服器。搭配 gulp 使用，就能達成檔案修改時，browserSnyc 會自動重整畫面，讓開發者能在瀏覽器上即時看到修改後的畫面。

browserSync

browserSync 這個套件有很多能搭配使用的方式。在官網上，除了原生的 API 外，也有支援 Gulp、Grunt、以及 Command line。先來個 Command line 的例子來熟悉一下好了

# CLI
npm install -g browser-sync # 在全域環境安裝
cd public # 切換到檔案已編譯好的資料夾
browser-sync start --server # 開啟暫時用的開發伺服器

browserSync 搭配 gulp 使用

印象中有 gulp 生態系中沒有 browser-sync 的相依套件，所以直接將 browserSync 整合到 gulpfile 中就好。以下是簡單的整合步驟說明

一、一開始，將 browser-sync 安裝到專案中

# CLI
npm install browser-sync gulp --save-dev

二、在 gulpfile 中整合 browser-sync

這樣在 gulp CLI 中呼叫 gulp brwoser，就能開啟一個伺服器。打開對應的網址，就能看到即時畫面。對應的網址會出現在 browserSync 提供的 CLI 訊息中，通常預設是 localhost:3000 的樣子

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
export function browser() {
  browserSync.init({
    server: {
      baseDir: "./public",
    }
  })
}

三、在檔案修改時，即時重整畫面

光叫出一個伺服器是不夠的；因為預設的設定，不會讓網頁畫面隨著開發檔案的修改而即時變動。因此需要在監控到檔案有變動的時候，重整網頁畫面，這樣瀏覽器才能抓到更新後的資料重新渲染。

export function ejs() {
  return gulp
    .src(["./source/**/*.ejs", "./source/**/*.html"])
    .pipe($.frontMatter())
    .pipe(
      $.layout(file => {
        return file.frontMatter
      })
    )
    .pipe(gulp.dest("./public"))
    .pipe(browserSync.stream())  // 監控到檔案變動後，執行完編譯工作，最後重整網頁
}