dev-ops git:(master) npm run watch-js > dev-ops@0.0.1 watch-js /Users/zuozuo/edaixi/dev-ops > watchify -t babelify app/assets/angular2/angular2.js -o app/assets/javascripts/bundle.js --ignore-watch='**/node_modules/**' --detect-globals=false --delay=0 -v 2128990 bytes written to app/assets/javascripts/bundle.js (10.44 seconds) 2128990 bytes written to app/assets/javascripts/bundle.js (0.80 seconds) 2128990 bytes written to app/assets/javascripts/bundle.js (0.71 seconds) 2128990 bytes written to app/assets/javascripts/bundle.js (0.65 seconds) 2128990 bytes written to app/assets/javascripts/bundle.js (0.59 seconds) 2128990 bytes written to app/assets/javascripts/bundle.js (0.59 seconds) 2128990 bytes written to app/assets/javascripts/bundle.js (0.58 seconds)

　　从上面的结果可以看到，第一次转换需要的时间特别长 10.44s，之后每次保存引起的转换操作的时间都在 1s以内，但是随这项目代码的不断增多这个时间会越来越长，我目前在公司所做的那个项目的转换时间基本每次都在 1s 左右了。这时候就会出现一个很烦人的问题：当你保存完代码然后立刻刷新页面的时候却发现 watchify 的转换操作还没完成，也就是你不得不再次刷新页面，这实在是不能忍。

　　幸好我们有很好的工具来解决这个问题，那就是 GitHub - guard/guard-livereload: Guard::LiveReload automatically reload your browser when 'view' files are modified.

　　首先、安装 livereload 的浏览器插件

　　可以参考 How do I install and use the browser extensions?

　　然后、安装 guard 和 guard-livereload

　　在 Gemfile 中添加下面的代码：

# Gemfile group :development do gem 'guard' gem 'guard-livereload', '~> 2.5', require: false end

　　执行：

$ bundle install $ guard init livereload

　　其中 guard init 命令会在根目录生成 Guardfile

　　将 Guardfile 改成下面的样子

# Guardfile guard 'livereload' do watch(%r{app/assets/javascripts/bundle.js}) watch(%r{app/assets/angular2/**/.+\.html}) end

　　然后启动 guard server：

$ bundle exec guard

　　然后在浏览器中通过上面安装好的 livereload extension 连接 guard server

　　现在去编辑并保存 hello_world.js 之后，浏览器在 watchify 的转换完成之后自动刷新页面，将我们从无尽的 CMD-R 中解放了出来。

　　如果你跟我一样用的是 MacVim 的话，可以在你的 vim 配置文件 .vimrc 中加上下面这行：

　　au FocusLost * silent! wa

　　它的作用是当 vim 失去屏幕焦点是自动保存当前编辑的文件。

　　所以你现在可以直接在 MacVim 中编辑 hello_world.js 然后，按 CMD-Tab 切换显示浏览器，然后浏览器会在 watchify 的转换完成之后自动刷新页面，这下子我们连 CTRL-S 都可以省略了。

　　文章中所有的代码都可以在 GitHub - zuozuo/dev-ops: dev-ops with angular2 and rails 找到。

　　注：后面有关部署的部分会放到下一篇文章《Rails + ES6 + Angular2 前后端分离开发(二)》去写。

　　作者：左家庄

　　原文：