自动调试自动编译五分钟上手

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"
  1. 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.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

您不用在多个浏览器、多个设备间来回切换,频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中,这一切还可以通过可视化界面来控制

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏祝威廉

StreamingPro-Editor, 基于Intellij Idea 的编辑器插件发布

StreamingPro在内部已经用在比较复杂的项目上了。所以导致配置文件巨复杂,之前同事提到这事,然后我自己把配置代码拉下来,看了下确实如此。一开始想着能否利...

10620
来自专栏xdecode

通过邮箱发送html报表

前言 需求是发送邮件时, 可以将报表正文贴到邮件里, 可以正常复制选中报表内容. 目前的做法是简单粗暴的转成了一张图片, 这样效果显然是很糟糕的. 今天看到邮箱...

39290
来自专栏深度学习之tensorflow实战篇

mysql、mongodb、python(dataframe).聚合函数的形式,以及报错解决方案

1、mysql select * from table_name group by name,id 有的时候执行下面语句报错sql_mode=only_ful...

31740
来自专栏Java架构沉思录

一文读懂 HTTP 2.0 之服务器推送

原文:http://www.ruanyifeng.com/blog/2018/03/http2_server_push.html

12010
来自专栏小二的折腾日记

使用gitpage+Hexo搭建自己的博客

摘自:https://xuanwo.org/2015/03/26/hexo-intor/ 写的很详细了,就不仔细写一遍了,就当个记录吧,以后出问题了好解决一点。

13420
来自专栏Java面试笔试题

在VMware上安装CentOS版本的Linux虚拟机

2.点击“编辑虚拟机设置”,选择“CD/DVD”,点击"使用ISO映像文件"在本地找到合适的镜像文件;

18720
来自专栏桥路_大数据

使用夜神模拟器运行React Native躺坑详解

51480
来自专栏吴柯的运维笔记

Linux系统日志管理常用的工具和指令

前言 日志对于安全来说,非常重要,它记录了系统每天发生的各种各样的事情,你可以通过它来检查错误发生的原因,或者受到攻击时攻击者留下的痕迹。 日志主要的功能有:...

766110
来自专栏编程微刊

微信小程序云开发 初学者入门教程一

本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代...

1.4K30
来自专栏性能与架构

如何管理linux开机自启服务?

自启动服务非常重要,例如 (1)需要手动添加希望自启的服务,如安装svn后没有自动添加,就需要我们手动加入 (2)安装某些程序后,自动加到自启动了,但我们...

315110

扫码关注云+社区

领取腾讯云代金券