mac下监控文件变化刷新浏览器

最近在学习css，本地手写代码时候希望能实现实时预览功能。
网上找了下资料live reload 方案，大都和IDE/编辑器绑定
想着有没有更简单点，监控目录下文件变更然后刷新浏览器的方案。
随手google了下，还真有

监控文件变更

在mac下监控文件使用的是fswatch
首先安装

brew install fswatch

按照官方wiki给的例子

fswatch -0 ~/code/learn_css | xargs -0 -n 1 echo

新开1个命令行

touch ~/code/learn_css/index.html

可以看到监控窗口中输出了变更的文件名

刷新浏览器

用Automator新建1个应用

运行Javascript代码

function run(input, parameters) {
    var chrome = Application('Google Chrome');
    var activeTab = chrome.windows[0].activeTab;
    activeTab.reload();
    return input;
}

保存到桌面

修改监控代码为

fswatch -0 -e '\.#' ~/code/learn_css | xargs -0 -n 1 ~/Desktop/refreshchrome.app/Contents/MacOS/Application\ Stub

搞定开工