一、安裝browser-sync模組

    npm i -D browser-sync

二、引入browser-sync模組，並初始化

    var browserSync = require('browser-sync').create();

    gulp.task('browser', function(){
        browserSync.init({
            server: './dist'    // 訪問目錄
            // proxy: "你的域名或IP"    // 設定代理
        });
    });

    gulp.task(
 
'default', ['clean'], function() {
        gulp.start(['html', 'js_libs', 'js_main','css_main','images', 'browser'])
    });
    

三、執行gulp命令，完成後會自動開啟瀏覽器

會發現報錯：找不到圖片。
原因是：執行browser任務時，images任務還沒有執行完畢，所以找不到dist/images檔案。
臨時解決方案：重新重新整理頁面就可以了。
最終解決方案：是讓說有的任務按照指定順序執行，請參照後續文章

四、伺服器地址說明

    [
 
Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000
    External: http://169.254.109.182:3000

1、Local: http://localhost:3000（預設開啟此伺服器地址）

2、External: http://169.254.109.182:3000（可用手機訪問）

注意：需要手機除錯的時候可以訪問這個地址，但手機和電腦要在同一網路

相關文章

gulp構建專案（一）：環境準備