gulp 和 Browsersync 的聯合使用

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 因此不須要另外作配置了。

1、gulp 和 Browsersync 的聯合使用

一、安裝 「gulp 和 browser-sync」插件命令（在終端進入到項目根目錄執行）

            npm install --save-dev  gulp browser-sync gulp-sass

二、在項目根目錄下提供 "browser-sync" 插件任務配置須要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

三、在 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());
});

四、經過以下命令啓動服務，而且打開一個瀏覽器，訪問默認的 URL (http://localhost:3000)

            gulp serve

PS：若是沒有錯誤提示信息，證實就沒什麼問題了。如今去修改源文件，看看瀏覽器是否能夠自動刷新頁面。未完待續。。。