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

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

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

如果你的文件層級(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è)備中，這一切還可以通過可視化界面來控制

轉(zhuǎn)載于:https://www.cnblogs.com/wangting888/p/9702143.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。