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

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

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