Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁面。更重要的是 Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。
無論您是前端還是后端工程師，使用它將提高您30%的工作效率。
MD5加密：

import crypto from "crypto";
function md5(data) {
    let Buffer = require("buffer").Buffer;
    let buf = new Buffer(data);
    let str = buf.toString("binary");
    return "md5_" + crypto.createHash("md5").update(str).digest("hex");
}

===================================
工具：自動(dòng)刷新
https://www.npmjs.com/package/browser-sync
中文網(wǎng)：http://www.browsersync.cn/

Image.png

更多功能的加入，完全免費(fèi)。5分鐘快速入門。

1. 安裝 Node.jsBrowserSync是基于Node.js的, 是一個(gè)Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js安裝適用于Mac OS，Windows和Linux。

2. 安裝 BrowserSync您可以選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。打開一個(gè)終端窗口，運(yùn)行以下命令：

npm install -g browser-sync

3.當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來使用，在您需要構(gòu)建的項(xiàng)目里運(yùn)行下面的命令:

npm install --save-dev browser-sync

4.BrowserSync 將啟動(dòng)一個(gè)小型服務(wù)器，并提供一個(gè)URL來查看您的網(wǎng)站。// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）

browser-sync start --server --files "css/*.css"

5.如果您需要監(jiān)聽多個(gè)類型的文件，您只需要用逗號(hào)隔開。例如我們?cè)偌尤胍粋€(gè).html文件// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）

browser-sync start --server --files "css/*.css, *.html"

6. 如果你的文件層級(jí)比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。

browser-sync start --server --files "**/*.css, **/*.html"

7.如果您還沒有使用gulp或grunt，那么可以通過以上方式創(chuàng)建Browsersync

Image.png

自動(dòng)編譯五分鐘上手放在gulp里=============================
1.初始化：

npm init

Image.png

2.安裝gulp:

npm  i  gulp  --save

Image.png

3.安裝

npm install browser-sync gulp --save-dev

Image.png

Image.png

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
// 靜態(tài)服務(wù)器
// 設(shè)置靜態(tài)目錄
gulp.task('start', function() {
    browserSync.init({
         //設(shè)置靜態(tài)目錄
        server: {
            baseDir: "./static"
        }
    });
    //監(jiān)聽某文件的改變
    gulp.watch("./static/*.html").on('change', reload);
});

4.全部開啟遠(yuǎn)程調(diào)試：

Image.png

Image.png

5.找到自己的IP地址：

Image.png

6.操作筆記復(fù)雜：

Image.png

Image.png

7.以上若是原生調(diào)試不了：
換一種：

npm -g install weinre

Image.png

官網(wǎng)：
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

1，端口 ：2，調(diào)試域名： 3，開始 調(diào)試：

weinre --httpPort 9000 --boundHost -all- --debug true

Image.png

您不用在多個(gè)瀏覽器、多個(gè)設(shè)備間來回切換，頻繁的刷新頁面。更神奇的是您在一個(gè)瀏覽器中滾動(dòng)頁面、點(diǎn)擊等行為也會(huì)同步到其他瀏覽器和設(shè)備中，這一切還可以通過可視化界面來控制