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插件来自动刷新页面。的更多相关文章

  1. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

  2. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  3. ios 返回不会自动刷新页面问题

    在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...

  4. js返回上一页并刷新、返回上一页、自动刷新页面

    一.返回上一页并刷新 <a href="javascript:" onclick="self.location=document.referrer;"&g ...

  5. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  6. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  7. Servlet 自动刷新页面

    假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率.对于所有这些类型的页面,您需要定期刷新网页. Java Servlet 提供了一个机制,使得网页会在给定的时间间隔自动刷新. 刷新网页的 ...

  8. Servlet自动刷新页面

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/auto-refresh.html: 假设一个Web页面,显示了现场比赛得分或股票市场状况或货币兑 ...

  9. 使用node-livereload自动刷新页面

    1. 安装node 2. 安装python 3. 安装connect, serve-static和node-livereload (以下都假设命令行当前目录为e:\WebSite) e:\WebSit ...

随机推荐

  1. ABAP程序系统字段中英文详解

    SY-SUBRC: 系统执行某指令后,表示执行成功与否的变量,’0’ 表示成功SY-DBLNT: 被处理过的记录的笔数 SY-UNAME: 当前使用者登入SAP的USERNAME;SY-DATUM: ...

  2. SharePoint 2010 文档管理之点击次数

    前言:很多场景下,我们都需要对一篇文章或者文档的点击次数进行统计,然而SharePoint本身并没有给我们设计这样一个字段,所以我们需要通过简单的字段开发来实现这样一个功能. 一.创建项目: 1. 创 ...

  3. 扩展SharePoint链接字段

    默认SharePoint中的链接字段有很多限制,例如 输入文字的时候只能录入255个字符 链接显示的是文字 点击链接后只能在当前页面打开链接 - - - - - - -- - - - - - -   ...

  4. AVL树详解

    AVL树 参考了:http://www.cppblog.com/cxiaojia/archive/2012/08/20/187776.html 修改了其中的错误,代码实现并亲自验证过. 平衡二叉树(B ...

  5. 限制UITextField输入内容的长度

    一.前言 今天做手机号输入限制长度,例如我的textfield只能输入11位,如果再多输入的话就不再textfield中显示,只显示11位的手机号. 如果用ReactiveCocoa的话,这个很好解决 ...

  6. cornerstone 使用

    svn 使用方法 Check Out 下载的文件会与源文件产生一个working copy与源文件关联

  7. iOS Technology Overview_Introduction

    关于iOS技术 iOS是运行在iPad,iPhone和iPod touch设备上的操作系统.这个操作系统管理着这些设备的硬件并且提供了实现原生APP所需的技术.这个操作系统也附带许多系统APP,例如P ...

  8. C++语言-03-类与对象

    类 类是面向对象编程中的核心概念,用于定义一个数据类型的蓝图,描述类的对象包括什么,以及可以在这些对象上执行那些操作. 类的成员 数据成员 描述数据的表示方法 class ClassName { ac ...

  9. UIWebView的基本用法

    一.UIWebView的基础使用 1.创建UIWebView: CGRect bouds = [[UIScreen manScreen]applicationFrame]; UIWebView* we ...

  10. 敏捷软件开发(3)---COMMAND 模式 & Active Object 模式

    COMMAND 模式 command模式非常简单,简单到你无法想象的地方. public interface Command { void execute(); } 这就是一个command模式的样子 ...