livereload

Think back for one moment: how often have you manually reloaded a website to see the changes just made in the code editor? Hundreds of times, maybe thousands if you are a bit longer into the web business.

回想一下：您多久手动重新加载一个网站以查看刚刚在代码编辑器中所做的更改？ 数百次，如果您对网络业务的兴趣更长，则可能成千上万次。

This behavior seems to be so inherent to us, that we don’t call it into question. Yet it could be so easy. There’s a little tool called LiveReload, which magically reloads a webpage for us as soon as we save it. You may have heard of it, but never bothered to give it a try since the setup can have some pitfalls. The following guide will show how to get LiveReload up and running and finally give CMD + R (respectively F5 for our Windows friends) some rest.

这种行为似乎是我们固有的，因此我们不会对此表示怀疑。 然而，这可能是如此简单。 有一个名为LiveReload的小工具，可以在保存后立即为我们神奇地重新加载网页。 您可能已经听说过它，但是由于设置可能会有一些陷阱，因此从不尝试尝试。 以下指南将说明如何启动并运行LiveReload，并最终使CMD + R(对于Windows朋友来说分别为F5)得到一些休息。

简单的事情 (It’s the simple things)

The easiest way to bring relief is the eponymous App which can be found in the Mac App Store, whereby the emphasis lies on “Mac” here, since the program is only available for this OS in the final version. You will also find an alpha release for Windows on the website, but I’ve never tested it. However, the workflow described below should be more or less the same. Furthermore the luxury of the LiveReload App has literally its price, since it comes at 8,99 € (£6.99/$9.99).

最轻松的缓解方法是在Mac App Store中找到的同名App，此处重点放在“ Mac”上，因为该程序仅在最终版本中适用于此OS。 您还可以在该网站上找到适用于Windows的Alpha版本，但我从未对其进行测试。 但是，以下描述的工作流程应大致相同。 此外，LiveReload App的豪华价格实在是物有所值，因为它的价格为8,99欧元(6.99英镑/9.99美元)。

Luckily, as often in life, there is an alternative – maybe not so luxurious and coupled with a little bit of sweat, but every bit as effective as the paid App. LiveReload is also ready to be used directly within everybody’s favorite code editor Sublime Text 2 and a few others (a list of all supported editors can be found here, but I will show you on behalf of the former how to employ the plugin.

幸运的是，生活中还有很多其他选择–可能不那么豪华，并且流汗不止，但效果却与付费App一样。 LiveReload还可以直接在每个人喜欢的代码编辑器Sublime Text 2和其他一些代码中使用(可以在此处找到所有受支持的编辑器的列表，但我将代表前者向您展示如何使用该插件。

需要网络服务器 (Webserver required)

No matter which application you choose, there are generally two ways to use LiveReload in your daily workflow. Each of them needs some preparations, but they’re not that difficult. The most effective way – although it may sound pretty complicated for beginners – is to set up a web server. This way you don’t need to alter the files of your project to add the LiveReload behavior. The easiest way is to grab a copy of XAMPP (Mac, Windows) and run the installer.

无论选择哪种应用程序，通常都有两种方法可以在日常工作流程中使用LiveReload。 他们每个人都需要一些准备，但并不难。 尽管对于初学者来说听起来很复杂，但是最有效的方法是设置Web服务器。 这样，您无需更改项目文件即可添加LiveReload行为。 最简单的方法是获取XAMPP的副本( Mac ， Windows )并运行安装程序。

After that locate the “htdocs” directory, which can typically be found in “/Applications/XAMPP/xamppfiles/htdocs” on a Mac and “xampp\htdocs” in Windows, make a new folder in there and drop the files of your website into it. Now you just have to start the webserver at the control panel by clicking on the Apache “Start” button. Your website should now be available at http://localhost/whereby stands for the name of the folder you just created.

之后，找到“ htdocs”目录(通常可以在Mac上的“ / Applications / XAMPP / xamppfiles / htdocs”中找到，在Windows中是“ xampp \ htdocs”中)，在其中新建一个文件夹，然后放下网站文件进去。 现在，您只需要通过单击Apache“开始”按钮在控制面板上启动Web服务器。 您的网站现在应该位于http：// localhost / 从而 代表您刚创建的文件夹的名称。

XAMMP Control Panel. Mac (left), Windows (right)

XAMMP控制面板。 Mac(左)，Windows(右)

不要忘记你的扩展 (Don’t forget your extension)

Believe me, things get much easier from now on. The next thing you need to install is the LiveReload browser extension, which you can find here for Chrome and here for Firefox (yep, no IE). Now just point the LiveReload App to the folder, where you have put your files after the setup of XAMPP by clicking on the plus sign at the bottom left corner of the window.

相信我，从现在开始事情变得轻松多了。 接下来需要安装LiveReload浏览器扩展，您可以在此处找到适用于Chrome的浏览器和适用于Firefox的扩展(是的，没有IE)。 现在，只需将LiveReload App指向文件夹，即可在XAMPP设置后通过单击窗口左下角的加号将文件放置在该文件夹中。

Add a project by clicking on the + sign.

单击+号添加一个项目。

Then open the web server’s localhost URL from above and enable the LiveReload extension by clicking on the related symbol (as seen on the screenshots below). Back at the LiveReload app it should now say something like “1 browser connected, 0 changes detected so far” at the bottom. As soon as you change a file of your website – no matter if it’s HTML, CSS or JavaScript – the changes should be immediately reflected within the browser now.

然后从上方打开Web服务器的本地主机URL，并通过单击相关符号来启用LiveReload扩展(如下面的屏幕截图所示)。 回到LiveReload应用程序，它现在应该在底部说出“连接1个浏览器，到目前为止已检测到0个更改”。 更改网站文件(无论是HTML，CSS还是JavaScript)后，更改应立即反映在浏览器中。

The buttons for the LiveReload extension in Firefox (top) and Chrome (bottom).

Firefox(顶部)和Chrome(底部)中LiveReload扩展的按钮。

请代码编辑器 (Code editor please)

If you rather want to stay in your accustomed environment of your code editor – in this case Sublime Text 2, which I will use exemplary here -, the implementation is a little different. First you need to install the essential package manager Package Control, which just requires to enter some code into the console (“View > Show console” at the menubar of Sublime Text 2). The exact installation process can be found here.

如果您想保留在代码编辑器的惯用环境中(在本例中为Sublime Text 2，我将在此处使用该示例)，则实现有些不同。 首先，您需要安装基本的软件包管理器Package Control，只需在控制台中输入一些代码即可(Sublime Text 2菜单栏上的“查看>显示控制台”)。 确切的安装过程可以在这里找到。

After you have restarted the editor, hit CMD + Shift + P (CTRL + Shift + P for Windows) to open a Package Control prompt, type in “Install” and “Package Control: Install Package” should immediately be highlighted. Then hit Enter, wait a few seconds to load, write “LiveReload”, select the appearing entry, hit “Enter” again and the plugin is installed. Now restart Sublime Text 2 once more and like at the native App you just need to enter the localhost URL from above into your browser, enable the LiveReload plugin by clicking on it and from now on every change of the files of your project are directly reflected in your browser without the need to reload.

重新启动编辑器后，按CMD + Shift + P(对于Windows为CTRL + Shift + P)以打开“程序包控制”提示，键入“安装”，然后应立即突出显示“程序包控制：安装程序包”。 然后按Enter键，等待几秒钟以进行加载，编写“ LiveReload”，选择出现的条目，再次按“ Enter”键并安装插件。 现在再次重新启动Sublime Text 2，就像在本机应用程序中一样，您只需要从上方在浏览器中输入本地主机URL，通过单击即可启用LiveReload插件，从现在开始，项目文件的每次更改都将直接反映出来。在浏览器中，无需重新加载。

What to type in at the Package Control command prompt.

在“程序包控制”命令提示符下键入的内容。

更容易 (Way easier)

If all of that is much too complicated for you, there still remains the second way to use LiveReload which I promised above. It’s much simpler to set up, but has the disadvantage that you need to insert a small script into every HTML (or PHP or whatever) page of your project (which the browser plugin handles for you at the first method). It looks like this:

如果所有这些对您来说都太复杂了，那么仍然存在我上面承诺的使用LiveReload的第二种方法。 设置起来要简单得多，但缺点是您需要在项目的每个HTML(或PHP或其他)页面中插入一个小脚本(浏览器插件会为您处理第一种方法)。 看起来像这样：

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

If your web site is running on another server, you need to specify the IP address of your local computer instead. For example:

如果您的网站在另一台服务器上运行，则需要指定本地计算机的IP地址。 例如：

<script src="http://192.168.0.1:35729/livereload.js? snipver=1"></script>

Insert it right before the closing tag and you’re all set. Yep, all set. “Way easier than the hassle with web servers and browser extensions” you might think, but not every project allows to insert something else unneeded to every single page. But where there is shadow there is also light (or is it vice versa?). If you prefer the script method of LiveReload you have a big bonus: the live changes are also available on other devices apart from your developing machine – which, however, might again require a web server. Keen to know how to do that? Find out the IP address of your computer and enter it – including the (web server) path to your project – into your device you want have the LiveReload behavior on. Now if you change a file the differences also appear magically on your (mobile) device. Sweet, huh?

在结束之前将其插入 标签，一切就绪。 是的，都准备好了。 您可能会想：“这比使用Web服务器和浏览器扩展的麻烦要容易得多”，但并非每个项目都允许在每个页面中插入其他不需要的内容。 但是，在有阴影的地方也有光(或者反之亦然？)。 如果您更喜欢LiveReload的脚本方法，那么您将获得很大的好处：实时更改还可以在除开发机器之外的其他设备上使用-但是，可能再次需要Web服务器。 敏锐地知道该怎么做？ 找出计算机的IP地址，并将其(包括项目的(Web服务器)路径)输入到您要启用LiveReload行为的设备中。 现在，如果您更改文件，差异也会神奇地出现在您的(移动)设备上。 甜甜吧？

The script method works with the LiveReload app as well as Sublime Text 2 (or any other supported editor). For the sake of completeness I also want to mention that it can be combined with the browser extension, although that doesn’t make much sense, since the script already takes care that LiveReload works in every environment.

该脚本方法可与LiveReload应用程序以及Sublime Text 2(或任何其他受支持的编辑器)一起使用。 为了完整起见，我还想提到它可以与浏览器扩展结合使用，尽管这没有多大意义，因为该脚本已经确保LiveReload在每种环境中都可以工作。

预处理魔术 (Preprocessor magic)

But LiveReload has even more to offer. It’s the perfect companion for SASS, the favorite CSS preprocessor everybody seems to use. The compiler is not only triggered if you save the main SCSS file, but also if you edit a partial (an included file). The setup can be a little bit tricky, depending on the type of LiveReload you want to use, since the config.rb file needs to reside in the main directory of your project for the App, and in the SASS directory if you use the Sublime Text 2 plugin. Apart from that you can also use it to compile CoffeeScript, Eco, HAML, IcedCoffeeScript, Jade, LESS, Compass, Slim and Stylus.

但是LiveReload可以提供更多。 它是SASS(每个人似乎都喜欢使用的最喜欢CSS预处理器)的完美伴侣。 如果您保存主SCSS文件，不仅会触发编译器，而且如果您编辑部分(包含的文件)，也会触发编译器。 根据要使用的LiveReload的类型，设置可能会有些棘手，因为config.rb文件需要驻留在App的项目主目录中，如果使用Sublime，则需要驻留在SASS目录中文字2插件。 除此之外，您还可以使用它来编译CoffeeScript，Eco，HAML，IcedCoffeeScript，Jade，LESS，Compass，Slim和Stylus。

If all of that still can’t convince you, I might yet have something for you. Recently a pretty sweet package called LiveStyle was released, which supports bi-directional editing. That means not only that changes you make in your editor can instantly be seen in your browser, but also vice versa.

如果所有这些仍然不能说服您，那么我可能还会有适合您的东西。 最近，发布了一个名为LiveStyle的漂亮软件包，它支持双向编辑。 这不仅意味着您在编辑器中所做的更改可以立即在浏览器中看到，反之亦然。

Changes which are made with the developer tools are also updated in your editor. You even don’t need to save the files. Watch this and marvel.

使用开发人员工具进行的更改也会在您的编辑器中更新。 您甚至不需要保存文件。 观看并惊叹。

Unfortunately LiveStyle just works with vanilla CSS (no SASS or the like) and only supports Google Chrome, Safari and Sublime Text (with more browsers and editors to come). But it’s free (so far).

不幸的是，LiveStyle仅适用于普通CSS(不支持SASS等)，仅支持Google Chrome，Safari和Sublime Text(将提供更多浏览器和编辑器)。 但是它是免费的(到目前为止)。

The LiveStyle plugin.

LiveStyle插件。

As you can see there are several ways to finally give the reload key of your browser some rest. At first the setup of LiveReload may seem intimidating, but once everything runs, you won’t look back. It’s just a little tool, but will boost your productivity a great amount.

如您所见，有几种方法可以使浏览器的重载键最终得到一些休息。 乍一看，LiveReload的设置似乎令人生畏，但是一旦一切运行起来，您就不会回头。 它只是一个小工具，但是会大大提高您的生产率。

翻译自: https://www.sitepoint.com/livereload/

livereload