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. [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  2. 学习Android,最简单的按钮提示文本信息

    最近都在看Android系统架构跟四大组件,刚开始自己看书看网络资料,简直就是一脸懵,今天在这里对初学者,或者自学的同学,可以跟着我来学习,Android 编码一个按钮出发事件的小案例: 当然,在此之 ...

  3. Mac上的软件使用介绍

    目录大纲: Drop to GIF Parallels Desktop 1.Drop to GIF 功能:将视频文件可以生产动态图gif文件 网址在github上:https://github.com ...

  4. iOS证书失效

    iOS证书突然失效 今早上班打包直接报错,错误如图 根据错误信息到“钥匙串”里面看了一下证书,证书都莫名其妙的失效了,昨天还是好好的. 重新去钥匙串从证颁发中心获取证书,然后登陆开发者账号重新申请证书 ...

  5. ci 使用体会

    1.在git review后,必须前一天commit先merge后,下一个commit 才能merge,不然就会出现merge pending的状态. 2.jenkins的gerrit trigger ...

  6. 完全卸载VS2005或VS2008的步骤

    手动卸载步骤: Visual Studio Express Editions 进入控制面板,运行添加或删除程序  卸载 "MSDN Library for Visual Studio 200 ...

  7. Android程序入口以及项目文件夹的含义和使用总结—入门

    新接触一门程序或者开发框架,我一般都要先弄清楚程序的入口在哪里,程序怎么运行的:建立一个项目后,各个文件夹有什么作用以及如何使用等等.理清楚这些东西对以后开发是很有好处的,古话说得好,工欲善其事,必先 ...

  8. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)

    Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境 ...

  9. 50个jquery代码片段(转)

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  10. nginx 配置wordpress固定链接(自定义)

    今天在wordpress 下配置文章固定链接的时候,遇到了404的错误.我首先在wordpress下的设置里的“固定链接”配置页面,自定义链接的结构 “http://www.haozi8.com/%p ...