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 所以不需要另外做配置了。

一、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：如果沒有錯誤提示信息，證明就沒什么問題了。現在去修改源文件，看看瀏覽器是否可以自動刷新頁面。未完待續。。。