注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梨花寨

 
 
 

日志

 
 
 
 

实现开发的过程中代码修改后自动刷新页面,实时看到改动后的效果  

2016-09-27 08:06:21|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在页面开发过程中,需要不停的代码修改,保存,在刷新浏览器,才能看到代码改动的效果,如此反复,很枯燥且浪费时间。今天给大家推荐一个工具,可以实现,当你修改完代码保证时,自动刷新浏览器,能及时看到修改后的页面效果。
实现开发的过程中代码修改后自动刷新页面,实时看到改动后的效果 - 梨花寨 - 梨花寨


正如上图所示,使用 gulp-livereload,可以实时保存刷新,那样就不用按F5和切换界面了,开发过程中省了好多时间。

安装
第一步:全局安装gulp 和 当前目录部署 gulp 和 gulp-livereload
npm install gulp -g
npm install gulp gulp-livereload --save-dev

第二步:安装 chrome 插件,点击去安装

使用
第一步: 在项目根目录新建 gulpfile.js 文件,写入以下代码。

var gulp = require('gulp'),
livereload = require('gulp-livereload');

gulp.task('watch', function() {
livereload.listen();
// Home/Tpl/**/*.*的意思是 Home/Tpl下 任何文件夹 的 任何文件
gulp.watch('Home/Tpl/**/*.*', function(file) {
gulp.src(file.path)
.pipe(livereload());
});
});


第二步: 命令行下运行
gulp watch
此时,你会发现当你修改 app 文件夹下的任何文件,命令行都会有内容输出,说明能够监控到文件的变化,运作正常了。

第三步: 以服务器的方式打开页面,例如 localhost/web/,而不是 file:///d:web/Home/Tpl/index.html
接着点击刚刚安装的 chrome插件 ,中间变为实心黑色圆点表示开始运作了。

实现开发的过程中代码修改后自动刷新页面,实时看到改动后的效果 - 梨花寨 - 梨花寨

现在只要文件一保存,浏览器就会马上刷新了,就能及时看到页面效果了。

本文来源梨花寨,查看更多技术文章。


  评论这张
 
阅读(0)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018