gulp watch

Developers are a lazy bunch. Or at least I assume we are. Because of this reason we tend to build tools that make our work faster. From highly to .

开发人员是懒惰的一群。 或者至少我认为我们是。 因此，我们倾向于构建使我们的工作更快的工具。 从高度到 。

Today's article is on . If you don't know what gulp is, we have a good and that serves as a good intro to gulp.

今天的文章 。 如果您不知道什么是gulp，我们将提供一篇不错的和 ，作为gulp的良好介绍。

With gulp, we can build tasks that automatically compile , start a , the browser, transpile es6 to es5, etc.

借助gulp，我们可以构建自动编译 ，启动 ， 浏览器，将es6转换为es5等任务。

But, just as with life, sh&^ happens. A silly little punctuation (; I've got my eyes on you) can easily mess up our work. Thankfully, there's a few languages out there like Javascript which is very forgiving. Nonetheless, mistakes can happen.

但是，就像生活一样， sh＆^也会发生 。 一个愚蠢的标点符号（ ;我已经注视了您）很容易使我们的工作变得混乱。 值得庆幸的是，像Javascript这样的几种语言非常宽容。 但是，可能会发生错误。

Since we have a "gulp watcher" that watches our project and runs defined tasks when we make any change, an error can easily break our pipeline.

由于我们有一个“ gulp监视程序”，可以监视我们的项目并在进行任何更改时运行定义的任务，因此错误很容易中断我们的管道。

( )

Watching in Gulp refers to triggering a task when a change is made to a project's source.

Gulp中的监视是指在对项目源进行更改时触发任务。

So, before we watch a task, let's create a task that we will use as our example throughout this tutorial. The task we will create is a compilation task.

因此，在观看任务之前，让我们创建一个任务，该任务将在本教程中用作示例。 我们将创建的任务是编译任务。

We can create a new working directory, name it whatever you want. We can now create our gulpfile.js in our working directory. Then we add our build task. Before we define our task, we need to install our dependencies.

我们可以创建一个新的工作目录，随意命名。 现在，我们可以在工作目录中创建gulpfile.js 。 然后，我们添加构建任务。 在定义任务之前，我们需要安装依赖项。

For this article, here is a list of our dependencies.

对于本文，这是我们的依赖项列表。

{
      "private": true,  "devDependencies": {
        "gulp": "^3.9.1",    "gulp-notify": "^2.2.0",    "gulp-plumber": "^1.1.0",    "gulp-sass": "^2.3.2",    "gulp-util": "^3.0.7"  }}

Now that we have our dependency list, we can run npm install or if you have the new , you can run yarn install.

现在我们有了依赖项列表，我们可以运行npm install或者如果您具有的新 ，则可以运行yarn install 。

In the gulpfile, we can then define our gulp task.

然后，在gulpfile中，我们可以定义gulp任务。

const gulp = require('gulp');const sass = require('gulp-sass');gulp.task('compile-scss', function () {
         gulp.src('scss/main.scss')        .pipe(sass())        .pipe(gulp.dest('css/'));});

So from the command line, we can run gulp compile-scss and our sass file should be compiled.

因此，从命令行中，我们可以运行gulp compile-scss并且应该编译我们的sass文件。

观看任务 (Watching a Task)

Now that we have a task defined, let's trigger the file whenever we make a change to the project's source.

既然已经定义了任务，那么只要我们对项目源进行更改，就可以触发文件。

gulp.task('watch', function () {
         gulp.watch('scss/**/*.scss', ['compile-scss']);});

From the terminal, we can run gulp watch and whenever a file ending with .scss extension in any folder within the scss directory gets changed, compile-scss task is run.

从终端，我们可以运行gulp watch ，每当与SCSS目录中的任何文件夹中.scss扩展名结尾的文件中得到改变， compile-scss任务运行。

( )

We've got our task and watcher up and running, but if an error occurs in our SCSS file, the gulp watcher gets terminated. We then have to go back to the terminal and type gulp watch again. This gets very annoying really fast. A silly little ; can break our watcher.

我们已经启动并运行了任务和观察程序，但是如果我们的SCSS文件中发生错误，则gulp观察程序将终止。 然后，我们必须回到终端并再次输入gulp watch 。 这变得非常烦人。 一个愚蠢的小孩子; 会破坏我们的观察者

To avoid breakage like this, we can one of three things:

为了避免这种破损，我们可以采取以下三件事之一：

1. .
   。
2. .
   。
3. .
   。

( )

One a way to go about dealing with errors is to "swallow the error". The error(s) will be taken in by the application to prevent the task from breaking. Basically, errors will not be reported and the task will keep running.

处理错误的一种方法是“ 吞并错误 ”。 错误将由应用程序接受，以防止任务中断。 基本上，不会报告错误，并且任务将继续运行。

Since gulp sends a lot of events, we can hook into the error event of the task we don't want to fail.

由于gulp发送了很多事件，因此我们可以挂入我们不想失败的任务的错误事件。

gulp.task('compile-scss', function () {
         gulp.src('scss/main.scss')        .pipe(sass())        .on('error', function (err) {
                 console.log(err.toString());            this.emit('end');        })        .pipe(gulp.dest('css/'));});

As you can see above, from the on listener on the task. The on event listener takes in two parameters: the event and a function to be triggered when the event gets called. The function that gets called takes in the error object. We then log the stringified version of the error to the terminal.

正如你可以在上面看到，从on的任务监听器。 on事件侦听器接受两个参数：事件和调用事件时要触发的函数。 被调用的函数接收错误对象。 然后，我们将错误的字符串化版本记录到终端。

It is absolutely important to this.emit('end'), if this event is not triggered, the next pipe in this task pipeline never gets called, and the buffer will be left open.

对于this.emit('end')绝对重要，如果未触发此事件，则永远不会调用此任务管道中的下一个管道，并且缓冲区将保持打开状态。

( )

This method involves using the plugin.

此方法涉及使用插件。

The gulp-util plugin provides a lot of helpful methods, one of them is log. With this method, we can log the error to the terminal. To use this, we attach an error event listener to the pipe.

gulp-util插件提供了许多有用的方法，其中之一是log 。 使用这种方法，我们可以将错误记录到终端。 要使用此功能，我们将错误事件侦听器附加到管道。

var gutil = require('gulp-util');gulp.task('compile-scss', function () {
         gulp.src('scss/main.scss')        .pipe(sass())        .on('error', gutil.log)        .pipe(gulp.dest('css/'));});

But this method also requires us to go through each pipe in the pipeline and attach .on('error', gutil.log) listener to all tasks. Something like this.

但是此方法还要求我们遍历管道中的每个管道，并将.on('error', gutil.log)侦听器附加到所有任务。 这样的事情。

gulp.task('compile-scss', function () {
         gulp.src('scss/main.scss')        .pipe(sass())        .on('error', gutil.log)        .pipe(autoprefixer())        .on('error', gutil.log)        .pipe(gulp.dest('css/'));});

( )

Out of all three methods, this is my favorite. With , we don't need to go to each pipe and add a listener, we can just add a global listener to the task and have a meaningful error displayed.

在这三种方法中，这是我的最爱。 使用 ，我们不需要转到每个管道并添加侦听器，我们只需向任务添加全局侦听器，并显示有意义的错误即可。

var plumber = require('gulp-plumber');gulp.task('compile-scss', function () {
         gulp.src('scss/main.scss')        .pipe(plumber())        .pipe(sass())        .pipe(autoprefixer())        .pipe(cssnano())        .pipe(gulp.dest('css/'));});

We can have multiple pipes in this task and still only ever need to call plumber once.

我们可以在此任务中使用多个管道，但仍然只需要调用一次管道工。

( )

Now that we can see the errors without breaking out of watch, we need to find a way to get some kind of notification when an error occurs. There are several ways to do this, but I will cover only one method.

现在我们可以看到错误而又不失时机，我们需要找到一种在发生错误时获取某种通知的方法。 有几种方法可以做到这一点，但我将仅介绍一种方法。

The method I will cover in this article: will play a beeping sound when an error occurs, and also show a system notifcation that looks like this.

我将在本文中介绍的方法：发生错误时将发出蜂鸣声，并显示如下所示的系统通知。

This notification looks different according to your operating system.

根据您的操作系统，此通知看起来有所不同。

To get this feature to work, we need to extend the gulp-plumber plugin. So in our gulp task, we update our call to plumber.

为了使此功能正常工作，我们需要扩展gulp-plumber插件。 因此，在我们的任务中，我们将调用更新为plumber 。

gulp.task('scss', function () {
         gulp.src('scss/main.scss')        .pipe(plumber({
      errorHandler: function() {
                 // do stuff here        }}))        .pipe(sass())        .pipe(gulp.dest('css'));});

Notice, we pass an object that has an errorHandler property that takes a closure to plumber. We can then call our notify plugin in that closure.

注意，我们传递了一个具有errorHandler属性的对象，该对象对plumber采取了关闭操作。 然后，我们可以在该闭包中调用我们的notify插件。

var notify = require('gulp-notify');gulp.task('scss', function () {
         gulp.src('scss/main.scss')        .pipe(plumber({
      errorHandler: function(err) {
                 notify.onError({
                     title: "Gulp error in " + err.plugin,                message:  err.toString()            })(err);        }}))        .pipe(sass())        .pipe(gulp.dest('css'));});

We call the notify plugin and pass it an object that has a title and message property. Now, when an error occurs, a notification is triggered. To play a beeping sound, we can use *gulp-util * for that.

我们调用notify插件，并将其传递给具有title和message属性的对象。 现在，当发生错误时，将触发通知。 要播放提示音，我们可以使用* gulp-util * 。

var notify = require('gulp-notify');gulp.task('scss', function () {
         gulp.src('scss/main.scss')        .pipe(plumber({
      errorHandler: function(err) {
                 notify.onError({
                     title: "Gulp error in " + err.plugin,                message:  err.toString()            })(err);            // play a sound once            gutil.beep();        }}))        .pipe(sass())        .pipe(gulp.dest('css'));});

Now, when an error occurs, we get both sound and system notification and then you can check your terminal for more information.

现在，当发生错误时，我们会同时收到声音和系统通知，然后您可以检查终端以了解更多信息。

( )

The configuration in this article should be suitable for most users, but if you have any suggestions/improvements, please let us know in the comments.

本文中的配置应适合大多数用户，但是如果您有任何建议/改进，请在评论中告知我们。

翻译自:

gulp watch