使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123
使用gulp插件来自动刷新页面。再也不用修改一次,按一下F5了。
首选通过npm install gulp安装gulp。
在安装npm install gulp-connect。自动刷新,主要是通过这个插件来完成的。
最后配置gulpfile.js,内容如下:
var gulp = require('gulp'),
connect = require('gulp-connect');
//使用connect启动一个Web服务器
gulp.task('connect', function () {
connect.server({
host : '192.168.1.172', //地址,可不写,不写的话,默认localhost
port : 3000, //端口号,可不写,默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
});
gulp.task('html', function () {
gulp.src('./*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch('./css/*.css', ['html']); //监控css文件
gulp.watch('./js/*.js', ['html']); //监控js文件
gulp.watch(['./*.html'], ['html']); //监控html文件
});
//执行gulp server开启服务器
gulp.task('server', ['connect', 'watch']);
接着使用gulp server开启服务器,浏览器打开地址,就这么简单。
需要注意的是,如果有添加新文件,比如新的js文件,可能需要重新启动服务。

使用gulp插件来自动刷新页面。的更多相关文章
- gulp+browserSync自动刷新页面
BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...
- 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 提供了一个机制,使得网页会在给定的时间间隔自动刷新. 刷新网页的 ...
- Servlet自动刷新页面
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/auto-refresh.html: 假设一个Web页面,显示了现场比赛得分或股票市场状况或货币兑 ...
- 使用node-livereload自动刷新页面
1. 安装node 2. 安装python 3. 安装connect, serve-static和node-livereload (以下都假设命令行当前目录为e:\WebSite) e:\WebSit ...
随机推荐
- 转:NLog之:文件类型目标(File target)
转:http://www.cnblogs.com/RitchieChen/archive/2012/07/16/2594308.html 英文原文[http://nlog-project.org/wi ...
- Android拍照保存在系统相册不显示的问题
Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE); Uri uri = Uri.fromFile(new File(& ...
- 利用UIScrollView实现几个页面的切换
此实例可以了解一下UIScrollView的运用,以及表格跟页面跳转的内容: 原作者地址:http://www.cocoachina.com/bbs/read.php?tid=323514 效果图如下 ...
- iOS设计模式之原型模式
原型模式 基本理解 原型模式(Prototype),用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式其实就是从一个对象再创建另外一个可定制的对象,而且不需要知道任何创建的细节 ...
- iOS 界面调试利器Reveal
Reveal下载地址:http://revealapp.com/ ,目前要收费了,而且还不便宜,好东西都这样嘛~ 针对越狱设备和非越狱设备可以采取不同的方法,一种是在工程项目中加入Reveal.fra ...
- Eclipse中Program arguments和VM arguments的说明
在运行程序的时候,我们一般可以进行run configuration的配置,就比如tomcat源码导入eclipse之后,我们可以发现其运行配置如下: 其中Program arguments配置的元素 ...
- JSP入门&会话技术
一.JSP 1.jsp技术 jsp是sun提供动态web资源开发技术.为了解决在Servlet中拼写html内容css.js内容十分不方便的问题,sun提供了这样一门技术.如果说S ...
- IOS之UI--小实例项目--添加商品和商品名
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- QA:Failed to deploy artifacts from/to snapshots XX Failed to transfer file Return code is: 405, ReasonPhrase:Method Not Allowed.
QA: Failed to deploy artifacts from/to snapshots XX Failed to transfer file Return code is: 405, Rea ...
- 解决Spring4 MVC请求json数据报406错误
解决方法一: 1.导入jackson-core-2.5.1.jar和jackson-databind-2.5.1.jar 2.Spring配置文件添加: <!-- 避免IE执行AJAX时,返回J ...