( >o< )瞎!你还在用weinre?Browsersync来了!

来源:互联网 发布:科比vs杜兰特交手数据 编辑:程序博客网 时间:2024/04/29 17:27

遇见 Browsersync

所有发生了的事情皆是命运啊,曾经偷过的懒占过的便宜,呵呵,都来讨债了。

以前用的gulp+weinre是ex配置的,如今各奔东西,如今重装固态硬盘,如今gulp+weinre皆成为了旧日时光里的一杯冰可乐···哦,带吸管的····

靠人人要跑,靠山山要倒,既然如此,那就自己扛起大旗,另寻他法吧吧吧······既然要重新配置,那还用啥weinre,自然用更屌的呀呀呀呀···········

哎呀,我昨天做梦据说有人说我的博文拖沓冗长废话大堆,额,你造不造,程序媛也是灰常孤独的啊啊啊················

哦,我要用Browsersync了,我要将ex留在本本里的东东都剔除了,我要成为一个没有软肋的战士!即使没有盔甲·····总之不能有软肋················不能有软肋···············不能有软肋················不能有软肋················不能有软肋················

官网在此,快去膜拜http://www.browsersync.cn/


安装

  • 全局gulp
npm install -g gulp 
  • 全局 Browsersync
$ npm install browser-sync gulp --save-dev

配置gulpfile.js

gulp安装目录下,全局安装后,控制台会告知
这里写图片描述
新建gulpfile.js

var gulp = require('gulp');var browserSync = require('browser-sync');gulp.task('browser-sync', function() {    browserSync({        files: "**",        server: {            baseDir: "./"        }    });});gulp.task('default', ["browser-sync"]);

然后把项目文件也放在这个目录下,这样
这里写图片描述


启动gulp

这里写图片描述

访问演示页面

http://localhost:3000/www/index.html

现在修改文件后 ctrl+s即可多端自动刷新····


调试

访问控制台

http://localhost:3001/

这里写图片描述
点击这个,在一个新的标签页访问远程调试器
这里写图片描述
熟悉的weinre
这里写图片描述

现在只是简单的用起来了,后期会继续研究gulp哒

0 0
原创粉丝点击