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. Android WelcomeActivity 启动画更换网络图片

    1.运行效果  第一张是本地的启动图,第二张是网络启动图       2.用到的第三方jar包   Android-Universal-Image-Loader-master 不熟的请看  Andro ...

  2. Ubuntu下修改system.img 解包system.img、打包system.img

    一.准备工作:解压解打包工具,得到三个文件:make_ext4fs.mkuserimg.sh.simg2img,把它们跟要修改的 .img.ext4(或.img)文件放置到同一个目录下 二.转换源文件 ...

  3. Android 程序目录及UI的简介

    Android程序的目录结构 src:源码的组织管理目录. gen:自动生成的目录,会生成一些重要的文件,如R.java,该目录一般不需要我们编写. assets:该目录文件不会被编译成二进制编码,多 ...

  4. 操作数据库系统(OLTP)和联机分析处理系统(OLAP)的区别

    联机操作数据库系统的主要任务是执行联机事务和查询处理.这种系统称为联机事务处理(OnLine Transaction Processing,OLTP) 系统.它们涵盖了单位的大部分日常操作,如购物,库 ...

  5. iOS 公司开发者账号申请

    苹果开发者账号分三种. 个人账号:个人申请用于开发苹果app所使用的账号,仅限于个人使用,申请比较容易,$99. 公司账号:以公司的名义申请的开发者账号,用于公司内部的开发者共用,$99. 企业账号: ...

  6. IOS开发之功能模块--自定义UITabBarViewController的备用代码

    前言:因为常用,所以我就备份到这里,然后如果需要修改,可以根据需求进行相关的更改. @implementation YMTabBarController - (void)viewDidLoad { [ ...

  7. 用的比较多的linux命令

    vi编辑器 :set nu  显示行号 :$       到文件最后一行 文件查找 find . -maxdepth 1 -name "@*" 这个命令意思是,查找当前目录下以@开 ...

  8. virtualbox 安装 虚拟机的时候报错不能创建新任务

    找到原因是因为自己的windows是破解的, 找到C:\Windows\system32\uxtheme.dll这个文件,我的破解的windows在这里自带了一个uxtheme.dll.backup的 ...

  9. 每日Scrum--No.5

    Yesterday:学习并编写代码 Today:组织小组开一次阶段性的总结会议:讨论需求分析中存在的问题:继续学习和编写代码:总结前阶段代码出现的问题 Problem:编程要注意很多的特殊情况,程序成 ...

  10. OOD沉思录 --- 类和对象的关系 --- 包含关系4

    4.9 在实现语义约束时,最好根据类定义来实现.但是这经常会导致泛滥成灾的类,在这种情况下约束应当在类的行为中实现,通常在类的构造函数中实现,但不是必须如此. 还是以汽车为例,我们看汽车的定义,为了集 ...