瀏覽器同步檢視
如果我們在修改頁面時，想要同時知道不同瀏覽器畫面的瀏覽狀況時，可以透過 browser-sync 去達到同時瀏覽畫面的效果
$ npm install --save-dev browser-sync
啟動 BrowserSync 的服務時，指定去監控 hostname 為 kejyun.dev 的網頁
然後監看我們任何網頁的 html 或 css 檔案做異動的時候，自動重新讀取頁面
kejyun.dev為我在/etc/hosts裡面自訂的網域，連到自己本機的主機
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// 服務
gulp.task('serve', ['sass'], function () {
browserSync.init({
proxy: "kejyun.dev" // hostname
});
});
// 監看工作
gulp.task('watch', function () {
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// 編譯 SASS 檔案
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve', 'watch']);
啟動 gulp 後，BrowserSync 會自動開啟瀏覽器，並開啟 http://localhost:3000/ 網址，之後只要再自己用瀏覽器分頁手動開啟 http://localhost:3000/，BrowserSync 自己就會做畫面同步的動作了，這樣在不同畫面解析度就能夠同時開發了，Enjoy it～
$ gulp dev
[19:00:37] Using gulpfile ~/Project/gulpfile.js
[19:00:38] Starting 'serve'...
[19:00:38] Finished 'serve' after 7.66 μs
[BS] Proxying: http://kejyun.dev
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.105:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.105:3001
--------------------------------------
[19:00:38] Starting 'watch'...
[19:00:38] Finished 'watch' after 657 ms