修改页面浏览器自动刷新
2016-04-25 15:47
281 查看
[b]方法一:WebStorm + JetBrains IDE Support(不需要点击浏览器,js不会同步更新,适合写html+css时使用[b][b])[/b][/b][/b]
1. 插件安装 jetbrains ide support
2.在webstorm文件右击选择‘调试index.html’在chrome浏览器 打开
3.更改文件,浏览器同步变化,改js代码浏览器不会发生变化,调试过程中不能开浏览器的控制台,输出结果可以在IDE看到
如果webstrom debug提示chrome没有安装JetBrains插件,打开插件检查端口是否对应
方法二:fis3实现(不需要点击浏览器[b][b])[/b][/b]
1. cmd 进入目录
2. npm install fis3 // 安装
3. fis3 server stop // 停止
4. fis3 server start // 启动
5. fis3 release -wL // 浏览器自动刷新
方法三: browser-sync实现[b](需要点击浏览器)[/b]
1. npm install -g browser-sync // 全局安装browser-sync
2. browser-sync start --server --files "*.*" // 启动
方法四:livereload实现(需要点击[b][b]浏览器[/b])[/b]
1. npm install gulp // 安装gulp
2. npm install gulp-livereload --save-dev // 安装gulp组件livereload
3. 配置gulpfile.js:
4. 新建index.html:
5. cmd进到目录执行gulp wall
6. npm http-server // node全局库,使页面可以通过http访问
7. 谷歌浏览器安装livereload插件需要FQ,点击下载
8. 点击livereload浏览器插件即可启动
1. 插件安装 jetbrains ide support
2.在webstorm文件右击选择‘调试index.html’在chrome浏览器 打开
3.更改文件,浏览器同步变化,改js代码浏览器不会发生变化,调试过程中不能开浏览器的控制台,输出结果可以在IDE看到
如果webstrom debug提示chrome没有安装JetBrains插件,打开插件检查端口是否对应
方法二:fis3实现(不需要点击浏览器[b][b])[/b][/b]
1. cmd 进入目录
2. npm install fis3 // 安装
3. fis3 server stop // 停止
4. fis3 server start // 启动
5. fis3 release -wL // 浏览器自动刷新
方法三: browser-sync实现[b](需要点击浏览器)[/b]
1. npm install -g browser-sync // 全局安装browser-sync
2. browser-sync start --server --files "*.*" // 启动
方法四:livereload实现(需要点击[b][b]浏览器[/b])[/b]
1. npm install gulp // 安装gulp
2. npm install gulp-livereload --save-dev // 安装gulp组件livereload
3. 配置gulpfile.js:
var gulp = require('gulp'), livereload = require('gulp-livereload'); gulp.task("all", function(){ gulp.src("./**").pipe(livereload()); }); gulp.task("wall", function() { livereload.listen(); gulp.watch('./**', ['all']); });
4. 新建index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"/> </head> <body> <h1>hello</h1> </body> </html>
5. cmd进到目录执行gulp wall
6. npm http-server // node全局库,使页面可以通过http访问
7. 谷歌浏览器安装livereload插件需要FQ,点击下载
8. 点击livereload浏览器插件即可启动
相关文章推荐
- HttpContext.Current为NULL
- Maven 多套环境配置
- 18(终端IO)和19(伪终端)
- 万物互联时代的数据中心
- NSNotification-iOS初学
- iOS每日一记之-------------------获取label的行数。。。。。恩
- centos 源码安装Nginx
- C#编程总结(九)字符编码
- 学习进度条六(第七周)
- 直播源格式转换教程——rtmp/rtsp/http/m3u8!!
- 一、配置自己的markdown编辑器
- 初学webapi时遇到的奇葩问题
- JSP注入攻击tomcat服务器小案例
- 剑指offer之面试题19:二叉树的镜像
- mysql服务器查询慢原因分析方法
- IAR 调试 CC2530
- ElasticSearch 概念解析
- mysql服务器查询慢原因分析方法
- oracle-2中commit 详解
- 用premake5创建lua532工程