双屏切图:使用livereload实现自动刷新

livereload是一个web开发辅助工具,当我们修改完html、css和js的时候会自动刷新浏览器,解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本,比如基于ruby的版本,我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务,并且检测文件变化,浏览器打开一个页面时候,引入固定的livereload.js(chrome插件会帮忙加上)会建立ws请求,当node检测到文件变化,则自动推送消息给浏览器,实现刷新。

livereload环境搭建

  • nodejs安装
  • grunt安装
  • grunt-contrib-watch:npm install grunt-contrib-watch –save-dev
  • grunt-livereload:npm install grunt-livereload –save-dev
  • chrome插件:安装