一、liveReload插件开发背景
Web前端开发人员在写页面时,如果修改了HTML or CSS,要想看效果通常的做法就是保存代码就得 Alt+Tab,切换到浏览器(当然,我知道很多开发人员是双屏操作不一定需要切换到浏览器),但是一定要F5刷新才能看自己刚写的代码有没有效果,没有效果就再切换到编辑器下修改,然后再切换到浏览器F5刷新看效果,还没有效果,就再继续修改,如此反复。时间久了,前端自动化一类的工具就是为了把双手从这些反复的,无意义的操作中拯救出来。开发人员就是那种能让机器完成的事自己绝不动手的动物,所以当然有解决这种问题的方法。网上的方案很多,今天在这里介绍的LiveReload就是一款这样的工具,它可以监听你设置的文件夹中文件的改变,若是文件内容有改变,它会自动刷新浏览器.切换到浏览器F5刷新,让你实时预览html效果。
注:博主是在Windows下进行安装,其他操作系统具体步骤或有变动。
二、使用LiveReload前的准备工作
在谷歌浏览器中安装LiveReload插件,并在Chrome的扩展器中启动livereload的功能;(没翻墙的小同志们请点这里传送门~)接下来,打开chrome浏览器,点击右上角菜单-->更多工具-->扩展程序,把下载好的livereload插件拖到里面。
右击右上角的小logo,选择“管理扩展程序”
npm install -g http-server
npm install -g livereload
三、正式开始LiveReload
- 先打开cmd,cd到你的项目路径下,开启本地服务:(可以直接在项目的文件下,shift+鼠标右键->在此处打开命令行)
- 在项目文件路径下,再打开一个cmd窗口,开启livereload功能:
- 最后访问localhost:8080,注意此时浏览器右上角的livereload小图标中心的点是空心的,代表还未开启服务;用鼠标点击一下小图标,则是开启服务,此时小图标中心点变成实心。