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分鐘快速入門。

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

安裝 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"

如果你的文件層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.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

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

轉載于:https://www.cnblogs.com/wangting888/p/9702143.html

總結

以上是生活随笔為你收集整理的自动调试自动编译五分钟上手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。