使用gulp和google浏览器实现保存自动刷新
2017-03-22 13:54
477 查看
作为前端人,每次保存了内容以后都需要手动去刷新页面确实浪费很多的时间,幸亏有了像gulp一样的东西,感觉好幸福,配置好了以后可以实现文件保存页面自动刷新。
流程:
1.首先安装nodejs,去官方网站上下载就行。
2.全局安装gulp,
6.将当前的文件用那种可以直接在服务中打开的方式打开,或者直接用ide打开,有hbuilder,webstorm,brackets等,就是地址不是以file开头的话才行。
7.需要在google浏览器里面安装扩展,打开google浏览器的应用商店,在里面搜索livereload,(需要翻墙)安装成功,在需要监听的页面点击扩展插件,中间的圆点就会从空心变成实心,这时候测试一下,就会发现,每次保存成功,就会自动刷新一下,确实厉害了。
流程:
1.首先安装nodejs,去官方网站上下载就行。
2.全局安装gulp,
npm install gulp -g3.在需要监听刷新的页面中安装gulp和gulp-livereload
npm install gulp --save-dev npm install gulp-livereload --save-dev4.在当前文件夹建立一个gulpfile.js文件,然后在里面写入
var gulp = require("gulp"); var livereload = require("gulp-livereload"); gulp.task("watch",function(){ livereload.listen(); // app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件 gulp.watch('app/**/*.*', function (file) { livereload.changed(file.path); }); });5.保存以后,在当前文件夹打开cmd,输入命令
gulp watch如果运行起来提示finished watch的话,证明成功运行,如果在监听文件夹里面修改东西控制台自动更新的话,证明没问题了就。
6.将当前的文件用那种可以直接在服务中打开的方式打开,或者直接用ide打开,有hbuilder,webstorm,brackets等,就是地址不是以file开头的话才行。
7.需要在google浏览器里面安装扩展,打开google浏览器的应用商店,在里面搜索livereload,(需要翻墙)安装成功,在需要监听的页面点击扩展插件,中间的圆点就会从空心变成实心,这时候测试一下,就会发现,每次保存成功,就会自动刷新一下,确实厉害了。
相关文章推荐
- 使用gulp和browser-sync实现浏览器自动刷新
- 使用gulp和browserSync实现页面自动刷新
- 使用gulp和browser-sync实现自动刷新浏览器
- 使用gulp和browser-sync实现自动刷新浏览器
- 使用gulp实现文件更改自动刷新
- 使用gulp实现自动刷新浏览器
- nodejs在线xlsx转json,使用gulp实现文件更改自动刷新
- 详解如何使用gulp实现项目在浏览器中的自动刷新
- Gulp+BroserSync实现浏览器自动刷新
- 使用Ext.UpdateManager实现页面任意部分自动刷新处理
- 使用 Grunt 实现页面自动刷新
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
- 使用Gulp搭建本地开发web服务器及自动刷新
- 用gulp-livereload实现自动刷新页面(v3.0.2)
- 使用AJAX技术实现网页无闪自动局部刷新
- 使用Outlook插件实现自动保存邮件为TestTrack记录
- 使用Ext.util.TaskRunner类实现,Ext的API中有示例,grid页面自动刷新
- 使用AJAX技术实现网页无闪自动局部刷新
- ios-day13-01(私人通讯录。控制器之间的数据传递、保存密码和自动登录的实现、普通对象的归档、UITableView的局部刷新和向左滑动删除功能等等)