gulp+browserSync自动刷新页面
BrowserSync
“Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。”
简单的说,BrowserSync就是搭建一个nodeJs服务器,监听指定文件,文件改动后,能够自动刷新所有设备的页面。开发时再也不用手动刷新页面啦,yeah~。
安装
首先,要安装nodeJS。
然后通过npm全局安装browserSync。
npm install -g browser-sync
完成后,查看版本号
browser-sync --version
恭喜你,安装成功啦。
输入一下命令就可以启动服务器啦,默认端口号为3000,如果默认端口号被占用,browserSync会寻找其他可用的端口号。当然,也可以通过--port指定端口号、
browser-sync start --server
更多的命令行使用方法可以参看官网。
gulp
直接上gulpfile.js代码吧。最后一行,当html发生改动后,会自动刷新页面。
let gulp = require('gulp');
let browserSync = require('browser-sync').create(); gulp.task('server', ['stylus', 'babel'],function() {
browserSync.init({
server: {
baseDir: './'
}
})
gulp.watch(`${mod}/*.html`).on('change', browserSync.reload);
})
监听静态文件
gulp.task('stylus', function() {
return gulp.src(filePath.css.src())
.pipe(stylus({
compress: true,
use: nib()
}))
.pipe(gulp.dest(filePath.css.dest()))
.pipe(browserSync.stream())
}) gulp.task('stylus:watch', ['stylus'], browserSync.reload()) gulp.task('babel', function() {
mod = argv.m;
return gulp.src(filePath.js.src())
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest(filePath.js.dest()));
}) gulp.task('babel:watch', ['babel'], browserSync.reload())
只需要在任务的最后,调用reload方法,即可自动刷新页面了。这里只在监听任务中调用了reload()。
gulp+browserSync自动刷新页面的更多相关文章
- gulp browser-sync自动刷新插件
很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示: $ npm install browser-sync --save-dev> ws ...
- 使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...
- browsersync即时刷新页面
Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 官网: http://browsersync.cn/ 多个浏览器.多个设备间来 ...
- js自动刷新页面代码
<script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...
- ios 返回不会自动刷新页面问题
在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...
- js返回上一页并刷新、返回上一页、自动刷新页面
一.返回上一页并刷新 <a href="javascript:" onclick="self.location=document.referrer;"&g ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
- Servlet 自动刷新页面
假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率.对于所有这些类型的页面,您需要定期刷新网页. Java Servlet 提供了一个机制,使得网页会在给定的时间间隔自动刷新. 刷新网页的 ...
随机推荐
- 图解CSS选择器之nth家族
1 nth-last-of-type 顾名思义从最后开始的元素开始选取可接受 数字 关键词 公式 比如4n+0就是每隔四个 odd even关键词表示奇偶数 .classify-item:nth- ...
- C#实现rabbitmq 延迟队列功能
最近在研究rabbitmq,项目中有这样一个场景:在用户要支付订单的时候,如果超过30分钟未支付,会把订单关掉.当然我们可以做一个定时任务,每个一段时间来扫描未支付的订单,如果该订单超过支付时间就关闭 ...
- Rookey.Frame v1.0极速开发平台稳定版发布
Rookey.Frame v1.0经过一年时间的修改及沉淀,稳定版终于问世了,此版本经过上线系统验证,各个功能点都经过终端用户验证并持续优化,主要优化以下几个方面: 1.性能较原来提升3倍之多 2.修 ...
- php数组--2017-04-16
一.定义数组 (1)索引数组 $arr=array(1,2,3,3); (2)关联数组 类似于集合 $arr1=array("one"=>"111",& ...
- Web性能优化工具WebPageTest(二)——性能数据
在前一篇<配置>完成后,点击“START TEST”,就可以开始测试,测试需要一段时间. 有时候可能还要排队,如下图所示,测试完成后可查看到测试结果. 一.Summary 1)优化等级 优 ...
- 统计学习方法:KNN
作者:桂. 时间:2017-04-19 21:20:09 链接:http://www.cnblogs.com/xingshansi/p/6736385.html 声明:欢迎被转载,不过记得注明出处哦 ...
- seajs加载angularjs
angularjs是自动完成模块的控制的,而seajs加载模块是异步的,所以不做修改,直接seajs加载angularjs会出错. 在这里讲下自己的解决方法 一.需要把ng-ap ...
- Python中的支持向量机SVM的使用(有实例)
除了在Matlab中使用PRTools工具箱中的svm算法,Python中一样可以使用支持向量机做分类.因为Python中的sklearn也集成了SVM算法. 一.简要介绍一下sklearn Scik ...
- [ext4]01 磁盘布局 - block分析
ext4文件系统最基本的分配单元是"block"(块). block是由一组连续的sectors来组成,其大小介于1k~4K之间,当然不可能是任意值,只能是2的整数次幂个secto ...
- 记录下一个C++初始化的方式(很少有人这么用,但是却是一个使代码更加简洁的方式)
很多时候,在一个类创建的时候给它初始化,一般呢,99%的人都会这么用: //A.h Class CA { int a; char* p; int getValue(); }; //A.cpp CA:: ...