自動調試自動編譯五分鐘上手

Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。
無論您是前端還是后端工程師，使用它將提高您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");
}

===================================
工具：自動刷新
https://www.npmjs.com/package/browser-sync
中文網：http://www.browsersync.cn/

Image.png

更多功能的加入，完全免費。5分鐘快速入門。

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

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

npm install -g browser-sync

3.當然您也可以結合gulpjs或gruntjs構建工具來使用，在您需要構建的項目里運行下面的命令:

npm install --save-dev browser-sync

4.BrowserSync 將啟動一個小型服務器，并提供一個URL來查看您的網站。// --files 路徑是相對于運行該命令的項目（目錄）

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

5.如果您需要監聽多個類型的文件，您只需要用逗號隔開。例如我們再加入一個.html文件// --files 路徑是相對于運行該命令的項目（目錄）

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

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

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

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

Image.png

自動編譯五分鐘上手放在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;
// 靜態服務器
// 設置靜態目錄
gulp.task('start', function() {browserSync.init({//設置靜態目錄server: {baseDir: "./static"}});//監聽某文件的改變gulp.watch("./static/*.html").on('change', reload);
});

4.全部開啟遠程調試：

Image.png

Image.png

5.找到自己的IP地址：

Image.png

6.操作筆記復雜：

Image.png

Image.png

7.以上若是原生調試不了：
換一種：

npm -g install weinre

Image.png

官網：
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

1，端口 ：2，調試域名： 3，開始 調試：

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

Image.png

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