livereload_使用LiveReload节省编码时间和精力

livereload

It’s a web development pattern so ingrained we barely notice it: hit ⌘-S to save an HTML or CSS file, ⌘-TAB to switch to a browser window, ⌘-R to refresh it, then back to the editor for more changes, repeated dozens of times a day.

这是一个Web开发模式，因此根深蒂固，我们几乎没有注意到它：按⌘-S保存HTML或CSS文件，按⌘-TAB切换到浏览器窗口，按⌘-R刷新它，然后返回编辑器进行更多更改，每天重复数十次。

Anything that cuts down this series of steps reduces fatigue while forging a closer link between code and design: rather than playing a guessing game (“does this work?” (save / refresh) “maybe this?” (save / refresh)) developers can watch the browser adapt to their code changes in close to real time. There are several tools that accomplish this today, with installation just a click away:

减少这一系列步骤的任何事情都可以减少疲劳，同时在代码和设计之间建立更紧密的联系：与其玩猜游戏(“这工作吗？”(保存/刷新)“也许是这样？”(保存/刷新))开发人员可以观看浏览器近乎实时地适应其代码更改。 如今，有几种工具可以完成此任务，只需单击即可完成安装：

LiveReload (LiveReload)

Probably the best-known of the browser refresh applications, LiveReload ($10 at the Mac App store, with a beta currently free for Windows users) works by installing the free LiveReload browser extension (Firefox, Chrome, and Safari are currently supported). For Mobile Safari, a small, temporary JavaScript snippet can be added to pages.

可能是最著名的浏览器刷新应用程序， LiveReload (在Mac App Store中为10美元，Windows用户当前免费使用Beta版)可以通过安装免费的LiveReload浏览器扩展程序(当前支持Firefox，Chrome和Safari)来工作。 对于Mobile Safari，可以将一个小的临时JavaScript代码段添加到页面中。

Once installed, simply point the LiveReload application at the folder containing your site. LiveReload monitors the save state of web files, including HTML, CSS, JavaScript and images; it can also compile pre-processed code such as Sass and CoffeeScript. Hit ⌘-S and any changes are immediately reflected in the browser. Between Coda’s keyword-based Snippet completion, Emmet’s macro shortcuts and LiveReload, page creation can be extremely accelerated, and far more fluid than traditional workflows:

安装后，只需将LiveReload应用程序指向包含您的站点的文件夹。 LiveReload监视Web文件的保存状态，包括HTML，CSS，JavaScript和图像； 它还可以编译诸如Sass和CoffeeScript之类的预处理代码。 按⌘-S ，所有更改将立即反映在浏览器中。 在Coda基于关键字的代码段完成， Emmet的宏快捷方式和LiveReload之间，页面创建可以大大加速，并且比传统工作流程更加流畅：

备择方案 (Alternatives)

LiveReload is hardly the only player in this space. Alternatives include:

LiveReload几乎不是这个领域的唯一参与者。 备选方案包括：

• CSS Refresh

  CSS刷新

• Reloadr

  装弹器

• Live.js

  Live.js

In addition, web development workflow suites such as Codekit, Prepos and Yeoman roll in live update features.

此外，Web开发工作流套件(例如Codekit ， Prepos和Yeoman)具有实时更新功能。

While the idea of in-browser development goes all the way back to Netscape Composer in 1997, credit for the popularization of live code editing probably rests with the Firebug browser extension. While Firebug and modern browser’s integrated developer tools remain extremely useful, right now I regard them as testing services, rather than development options. Similarly, most online sandboxes, such as Dabblet and CodePen, have similar update features as those we’ve discussed, but they are primarily testing and demonstration tools, rather than site development applications.

浏览器内部开发的想法可以追溯到1997年的Netscape Composer，而实时代码编辑的普及可能归功于Firebug浏览器扩展。 尽管Firebug和现代浏览器的集成开发人员工具仍然非常有用，但现在我将它们视为测试服务，而不是开发选项。 同样，大多数在线沙箱(例如Dabblet和CodePen )具有与我们所讨论的类似的更新功能，但它们主要是测试和演示工具，而不是站点开发应用程序。

建立 (Setup)

Applications like LiveReload work best when you have enough screenspace to display both your editor and an open browser window. A large monitor, or a dual-monitor setup, is pretty much a prerequisite.

当您有足够的屏幕空间来同时显示编辑器和打开的浏览器窗口时，像LiveReload之类的应用程序效果最佳。 大型监视器或双监视器设置几乎是先决条件。

Laptop users should be aware that there are several different techniques reloaders use to determine the change state of files. Reloadr and Live.js, mentioned above, use polling techniques, checking the file status repeatedly if there are no changes to the file. This can drain batteries faster than more subtle and integrated solutions such as LiveReload.

便携式计算机用户应注意，重新加载程序使用多种不同的技术来确定文件的更改状态。 上面提到的Reloadr和Live.js使用轮询技术，如果文件没有更改，则反复检查文件状态。 与诸如LiveReload之类的更精细的集成解决方案相比，这可以更快地消耗电池电量。

结论 (Conclusion)

From a long-term perspective, LiveReload and similar tools take a significant step towards true in-browser design, and should be a part of any modern web development workflow. With Chrome Workspaces, Emmet’s upcoming LiveStyle and a general increase in the use of source maps, innovation promises to bring ever-greater integration between code and browser.

从长远角度来看，LiveReload和类似工具朝着真正的浏览器内设计迈出了重要的一步，应该成为任何现代Web开发工作流程的一部分。 借助Chrome Workspaces ，Emmet即将推出的LiveStyle以及对源地图的广泛使用，创新有望在代码和浏览器之间实现更大的集成。

翻译自: https://thenewcode.com/719/Save-Coding-Time-and-Effort-With-LiveReload

livereload