前端开发网页实时刷新

前端开发产品开发流程
前端开发程序员的流程是怎样的
开发前端 流程图

Sublime3和Chrome配置自动刷新网页【实测可用】
SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法。win7下实测可用!

安装成功后,就不需要再手动去F5刷新页面了,修改完代码Ctrl+S,浏览器自动刷新,如果是双屏,效率提升还是比较明显的。

工具
Chrome
Sublime Text 3
Git

Chrome安装LiveReload
在Chrome插件中心搜索”reload”并安装,(https://chrome.google.com/webstore/search/reload?hl=zh-CN),

成功后可以看到地址栏右边多了一个LiveReload图标(装google插件,记得翻个墙)

Sublime3 安装LiveReload
Sublime3中,直接PackageControl里下载来的LiveReload没有效果,可以手动从git上下载。

1、打开“Sublime Text 3”点击菜单栏Preferences->Browse Packages…打开插件安装目录;

2、在插件安装目录下右击鼠标选择“Git Bash Here…”,打开git bash;

3、安装LiveReload插件,在命令行下输入

git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload

4、使用:Ctrl+Shift+P 打开ControlPackage

5、选LiveReload: Enable/disable plug-ins

6、选Enable – SimpleReload

如果不行,就在sublime text3 配置LiveReload。preferences -> Packge Settings -> LiveReload -> Settings – Default。

{
“enabled_plugins”: [
“SimpleReloadPlugin”,
“SimpleRefresh”
]
}

实时预览
1、在web服务器下编辑index.html文件输入如图内容,在浏览器中输入https://www.rokub.com访问文件;

2、然后点击 Chrome浏览器右边的“LiveReload”图标中间小圆点由虚变实,表示启动插件;

3、修改index.html文件内容按 ctr+s 保存,即可在chrome里面看到实时更新。

其他
如果之后打开sublime出现错误提示框,请看 http://blog.csdn.net/yaerfeng/article/details/9198213

自动刷新网页的其他方法:

webstorm有liveedit插件可以;(IDE)

brackets也有实时刷新功能;(IDE)

引入live.js可以,但是之后要手动去清除;

前端开发具体流程
前端流程图开发 拖拉拽
web前端开发的流程
» 本文来自:前端开发者 » 《前端开发网页实时刷新》
» 本文链接地址:https://www.rokub.com/7069.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!