這是在講 Gulp 不是飲料是任務自動化工具這件事:瀏覽器同步顯示(browser-sync)

前言

接下來要講的是本地開發時常常會使用到的 browser-sync,利用 browser-sync 我們可以立即的在自己本機在模擬伺服器

起手式

安裝相關文件可以在官方文件找到

1
npm install --save browser-sync

使用方式

基本上使用方式也都是參考官方即可

1
2
3
4
5
6
7
8
9
10
const browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./public" // 要注意這裡應該要指向到要模擬的伺服器資料夾,也就是 public
}
});
});

那應該要如何啟動呢?其實很簡單

1
gulp.task('default',gulp.series('copyHTML', 'scss', 'babel', 'image', 'browser-sync'));

接下來只需要輸入 gulp,就會發現自動開啟模擬伺服器囉~

gulp

(由於 Powershell 背景問題會無法顯示下面的連結,如果換成另一種就可以看出來了)

gulp

補充

如果專案太大的時候會發現瀏覽器重新整理的速度會太大,這個時候建議修改成這樣子會比較妥當

1
2
3
4
5
6
7
8
9
10
11
const browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./public" // 要注意這裡應該要指向到要模擬的伺服器資料夾,也就是 public
reloadDebounce: 3000 // 意指每次重新整理必須間格 3 秒
}
});
});

API文檔在這

最後的最後的補充

昨天寫完才注意到一件事情,就是開啟的 port,雖然預設當你執行 browser-sync 的時候會自動開啟瀏覽器,但是也有機會它並不會理你,所以如果要自定義開啟 port 的話可以這樣子修改

1
2
3
4
5
6
7
8
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./public"
},
port: 8080
});
});

這樣就可以在瀏覽器上手動輸入 localhost:8080 (通常預設是 localhost:3000)

最後這邊附上中文版 docs

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ