Browsersync 的簡介：
Browsersync 是一個 node 模塊，它能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less 等）並自動刷新頁面。更重要的是 Browsersync 可以同時在PC、平板、手機等設備下進項調試。您可以想象一下：“假設您的桌子上有 pc、ipad、iphone、android 等設備，同時打開了您需要調試的頁面，當您使用 Browsersync 後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。無論您是前端還是後端工程師，使用它將提高您 30% 的工作效率。有了它，您不用在多個瀏覽器、多個設備間來回切換，頻繁的刷新頁面。更神奇的是您在一個瀏覽器中滾動頁面、點擊等行爲也會同步到其他瀏覽器和設備中，這一切還可以通過可視化界面來控制。（Browsersync 官網：http://www.browsersync.cn/）
使用 Browsersync 和 gulp，你可以輕鬆地搭建一個本地開發服務器，然後在同一個 wifi 中的任何設備都可以方便地訪問到。Browsersync 同時集成了 live-reload 所以不需要另外做配置了。
一、gulp 和 Browsersync 的聯合使用
1、安裝 “gulp 和 browser-sync”插件命令（在終端進入到項目根目錄執行）
npm install --save-dev gulp browser-sync gulp-sass
2、在項目根目錄下提供 "browser-sync" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）
mkdir src
3、在 gulpfile.js 文件中配置使用 "browser-sync"
具體示例：
// Browsersync 的簡單使用（靜態服務器）
// 將 src 目錄下的所有文件加到服務器中，並且在文件發生改變之後所有的瀏覽器都會自動刷新
var gulp = require('gulp'),
browserSync= require('browser-sync').create(); // 創建一個未命名的 Browsersync 實例
gulp.task('serve', function () { // 自定義 "serve" 任務
browserSync.init({ // Browsersync 初始化配置
server: {
baseDir: 'src'
}
});
// 監視文件改動並重新載入
gulp.watch(['html/*.html', 'css/**/*.css', 'js/**/*.js'], {cwd: 'src'}, browserSync.reload);
});
具體示例：
// SASS + CSS 注入
// 當 css 文件文件預處理之後再重載它們。以 sass 爲例，瀏覽器無需刷新整個頁面而僅僅只是重載 css
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync= require('browser-sync').create(); // 創建一個未命名的 Browsersync 實例
// 靜態服務器 + 監聽 scss/html 文件
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: 'src'
});
gulp.watch('src/sass/*.scss', ['sass']);
gulp.watch('src/html/*.html').on('change', browserSync.reload);
});
// 將 sass 編譯後的 css 注入到瀏覽器裏實現更新
gulp.task('sass', function() {
return gulp.src('src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
});
4、通過如下命令啓動服務，並且打開一個瀏覽器，訪問默認的 URL (http://localhost:3000)
gulp serve
PS：如果沒有錯誤提示信息，證明就沒什麼問題了。現在去修改源文件，看看瀏覽器是否可以自動刷新頁面。未完待續。。。