在Gulp中使用LiveReload的快速指南

Tired of having to refresh your browser every single time you make changes to your LESS/SASS/CSS files? This article will take you step-by-step to getting LiveReload integrated in your development environment so you no longer have to reload your browser to see changes. For this tutorial, we'll be using Gulp. If you're unfamiliar with it, check out these awesome and super easy Scotch resources about it:

厌倦了每次对LESS / SASS / CSS文件进行更改时都必须刷​​新浏览器的麻烦？ 本文将逐步引导您将LiveReload集成到您的开发环境中，这样您就不必再重新加载浏览器即可查看更改。 在本教程中，我们将使用Gulp 。 如果您不熟悉它，请查看有关这些真棒且非常简单的Scotch资源：

• Getting Started with Less
  更少的入门
• Automate Your Tasks Easily with Gulp.js
  使用Gulp.js轻松自动化您的任务
• Our Gulp Starter on GitHub
  我们在GitHub上的Gulp入门
• Our Gulp and Less Starter Kit
  我们的无牙入门套件

总览 (Overview)

Livereload is an amazing piece of software that can really help improve your workflow - especially when it comes to CSS. The purpose of this article is to get you started in that direction as quickly and as easily as possible. In this article, we'll cover:

Livereload是一款了不起的软件，可以真正帮助改善您的工作流程，尤其是在CSS方面。 本文的目的是使您尽快并尽可能容易地朝这个方向开始。 在本文中，我们将介绍：

1. A brief overview
   简要概述
2. The logistics - making sure you have everything downloaded to get things running
   物流-确保您已下载所有内容以使事情正常运行
3. Editing a Gulp file to setup Livereload based on this Gulp and Less Starter
   根据此Gulp和Less Starter编辑Gulp文件以设置Livereload
4. Seeing LiveReload in action
   现场观看LiveReload

什么是LiveReload？ (What is LiveReload?)

Imagine a "happy land" where browsers don't need a Refresh button. Well, that's exactly what Andrey Tarantsov set out accomplish. LiveReload monitors changes in your file system (for example, your CSS or your images). As soon as a change is detected, such as a simple "save", the browser is refreshed automatically. In this example, we will be examining LiveReload through editing LESS files.

想象一下“幸福的土地”，其中浏览器不需要“刷新”按钮。 好吧，这正是安德烈·塔兰佐夫（Andrey Tarantsov）设定的目标。 LiveReload监视文件系统中的更改（例如CSS或图像）。 一旦检测到更改（例如简单的“保存”），浏览器就会自动刷新。 在此示例中，我们将通过编辑LESS文件检查LiveReload。

We'll be setting up LiveReload with Gulp. A lot of people immediately think that you have to purchase this software. The truth is, using LiveReload with Gulp is completely free to use. The creators of LiveReload sell a for-purchase app that makes it ridiculously easy to use.

我们将使用Gulp设置LiveReload。 许多人立即认为您必须购买此软件。 事实是，与Gulp一起使用LiveReload是完全免费的。 LiveReload的创建者出售了一个购买应用程序，使其易于使用。

LiveReload can also be utilized through other task runners, such as Grunt and Yeoman. And of course, we can use LiveReload for when we change our Javascript. I talk about its implementation towards the end of the tutorial.

LiveReload也可以通过其他任务运行者来使用，例如Grunt和Yeoman 。 当然，当我们更改Javascript时，可以使用LiveReload。 我将在本教程结束时谈论其实现。

Lastly, it's you may see that LiveReload is called LiveReload 3 on it's Github repo compared to LiveReload 2 in the Chrome Store. There is no need to worry about conflicting versions, the way we are implementing it will work perfectly regardless of version.

最后，与Chrome商店中的LiveReload 2相比，您可能会发现LiveReload在它的Github存储库上被称为LiveReload 3。 无需担心版本冲突，无论版本如何，我们实现它的方式都将完美运行。

所需用品 (Supplies Needed)

Change directory cd into the folder where your gulpfile.js and package.json is located via the command line. Once you are there, enter in the following command:

通过命令行将目录cd更改为gulpfile.js和package.json所在的文件夹。 到达那里后，输入以下命令：

npm install --save-dev gulp-livereload

Next, we need to download the Google Chrome extension LiveReload, go to the Chrome Store and download it here. Make sure you can view it in your tool bar and that the circle is filled in with black. This is important or else it won't work.

接下来，我们需要下载Google Chrome扩展程序LiveReload，转到Chrome商店并在此处下载。 确保可以在工具栏中查看它，并且圆圈用黑色填充。 这很重要 ，否则将无法正常工作。

Use incognito to manage sessions? You can enable Livereload in incognito by navigating to "More Tools", clicking "Extensions", and then checking the box to allow it in incognito mode. 使用隐身模式来管理会话？ 您可以通过导航到“更多工具”，单击“扩展”，然后选中复选框以使其在隐身模式下启用隐身LiveLiveload。

Now go to the 'build-css' task and type in .pipe(plugins.livereload()); after the .pipe(gulp.dest('build')).on('error', gutil.log). The ‘build-css’ task in it’s entirety should look like this...

现在转到“ build-css”任务并键入.pipe(plugins.livereload()); 在.pipe(gulp.dest('build')).on('error', gutil.log) 。 整个“ build-css”任务应如下所示：

gulp.task('build-css', function() {
       return gulp.src('assets/less/*.less')
            .pipe(plugins.plumber())
            .pipe(plugins.less())
            .on('error', function (err) {
                gutil.log(err);
                this.emit('end');
            })
            // .pipe(plugins.cssmin())
            .pipe(plugins.autoprefixer(
                {
                    browsers: [
                        '> 1%',
                        'last 2 versions',
                        'firefox >= 4',
                        'safari 7',
                        'safari 8',
                        'IE 8',
                        'IE 9',
                        'IE 10',
                        'IE 11'
                    ],
                    cascade: false
                }
            ))
            .pipe(gulp.dest('build')).on('error', gutil.log)
            .pipe(plugins.livereload());
    });

Put plugins.livereload.listen(); at the top line of watch task. It should look like this:

把plugins.livereload.listen(); 在watch任务的最上面。 它看起来应该像这样：

plugins.livereload.listen();
    gulp.watch('assets/js/libs/**/*.js', ['squish-jquery']);
    gulp.watch('assets/js/*.js', ['build-js']);
    gulp.watch('assets/less/**/*.less', ['build-css']);

Now, run Gulp in the command line and make sure everything is okay. If an error happens, most likely you had a missing or extra semicolon.

现在，在命令行中运行Gulp并确保一切正常。 如果发生错误，则很可能是您缺少了分号或多余的分号。

Now go ahead and make a change to your LESS file and see as you save the command the Gulp tasks will run, but a new one will appear. It will be the directory of your project and at the end build/style.css reloaded.

现在继续更改您的LESS文件，并在保存命令时看到Gulp任务将运行，但是将出现一个新任务。 这将是您项目的目录，最后是build / style.css reloaded 。

Go to your browser and you should see the browser has refreshed on save. If it hasn’t, I cannot stress enough that the black hole needs to be filled for the LiveReload Google Extension, or else it will not work.

转到您的浏览器，您应该看到浏览器在保存时已刷新。 如果还没有，我就不能过分强调LiveReload Google扩展程序需要填补黑洞，否则它将无法正常工作。

Want to be pro status? Add .pipe(plugins.livereload()); after the build (.pipe(gulp.dest('build’))) for your js in the 'build-js' task so you LiveReload after you save your .js file - it's only one extra line.

想要成为专业人士吗？ 添加.pipe(plugins.livereload()); 在'build-js'任务中为您的js build (.pipe(gulp.dest('build'))) ，因此在保存.js文件后可以进行LiveReload-这只是额外的一行。

结论 (Conclusion)

LiveReload can be really powerful when used with Gulp. Remember, do not forget to add plugins. before your LiveReload function call, unless you are not utilizing the gulp-load-plugins plugin. Don't listen to the other tutorials who say you need to add your port or host in the Gulp file. You do not need any parameters in your livereload.listen(), everything is set up! All in all only a couple lines of extra js so you do not have to do command-R anymore.

当与Gulp一起使用时，LiveReload会非常强大。 请记住，不要忘记添加plugins. 在LiveReload函数调用之前，除非您没有使用gulp -load-plugins插件。 不要听其他教程的人说您需要在Gulp文件中添加端口或主机。 您不需要在livereload.listen()中设置任何参数，一切livereload.listen()设置！ 总共只有几行额外的js，因此您不必再执行command-R。

翻译自: https://scotch.io/tutorials/a-quick-guide-to-using-livereload-with-gulp