使用tiny-lr自动刷新页面

编辑完代码，前端页面就可以自动刷新是一件很酷的事，可以显著提高调试的效率。

我来说说自己使用自动刷新页面的几种情况，如果是 node 项目我会使用自己做的模块，一个是 koajs 的中间件 koa-liveload，另一个是 connect 的中间件 liveload，在 express 项目里面使用。

组件的详细用法请参考文档，这里只想说这样做的方便之处在于只需要 2～3 行代码就可以启用 liveload 功能，而不用写什么 grunt 或者 gulp 那种看起来头疼的代码。

可是如果项目不是 nodejs 就不太好办了，幸运的是 tiny-lr 还提供了 Makefile 脚本，不过我一般是用自己写的，因为引用的 Makefile 不容易理解，其实不过是做了两件事，一是启动服务：

watch:
    @echo ... Starting server, running in background ...
    @echo ... Run: "make stop" to stop the server ...
    @tiny-lr &

二是变化时通过post请求通知前端页面，

build: 
    //构建过程的代码
    @curl -X POST http://localhost:35729/changed -d '{ "files": "build.js" }'

如果你还需要监视文件变化的话，我个人推荐 rewatch 这个小工具，大概用法如此：

rewatch index.js *.css -c "make build"

最后的 Makfile 大概是这样子的：

build: components index.js template.html
    //构建前端项目
    @curl -X POST http://localhost:35729/changed -d '{ "files": "build.js" }'

watch:
    @echo ... Starting server, running in background ...
    @echo ... Run: "make stop" to stop the server ...
    @tiny-lr &
    @rewatch index.js *.css -c "make build"

最后一件事就是在 html 页面里面嵌入 tiny-lr 的前端代码

<!-- livereload snippet -->
 <script>document.write('<script src="http://'
  (location.host || 'localhost').split(':')[0]
  ':35729/livereload.js?snipver=1"><\/script>')
 </script>

如果只调 Chrome 的话可以使用 livereload 嵌入脚本代码。

使用命令 make watch 启动服务，便可享受保存代码后项目自动构建然后浏览器自动刷新了。

还有一个剩下的问题就是我不知道有没有什么好办法把改变的文件名传到那个 curl 的命令里面（除非单独写一条指令），如果tiny-lr知道改变的文件是css的话，它只会重加载那个css，这样调试起来更方便些。