gulpfile.js 中的 () => {} 是什么意思

Question

我正在学习 js，刚开始使用 yeoman 生成器。我使用 gulp 进行预处理和其他操作。当我浏览 gulpfile.js 时，我发现了这段代码。

gulp.task('serve', ['styles', 'html', 'watch'], () => {
    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: 'app'
        }
    })
});

我可以理解，当我们执行gulp-serve时，它会运行样式，html和监视任务，并在9000端口打开一个开发服务器。

但是我不明白这个() =>是什么意思。

如果有人能告诉我这是什么意思，将不胜感激。

提前致谢。

Answer 1

它正在定义一个不带参数的内联函数。函数的主体在 {} 中。然后这个新函数作为回调传递给 task() 函数。

Answer 2

他们被称为Arrow functions

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Mozilla Docs

简单来说，它是 function(){} 的替代品，除了 this context

这就是您的代码的样子：

gulp.task('serve', ['styles', 'html', 'watch'], function() {
    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: 'app'
        }
    })
});

（作为第三个参数传入的匿名函数）

无论如何，这是一个 ES6 功能，您可以在 this link 中探索更多类似的功能：P

Answer 3

ES6 箭头函数

它是一个匿名函数。您拥有的代码可能是

gulp.task('serve', ['styles', 'html', 'watch'], function () { browserSync({ notify: false, port: 9000, server: { baseDir: 'app' } }) });

箭头函数最棒的地方在于你仍然可以在上下文中使用 this。你不必在函数之外定义类似 let self = this; 的东西。

gulpfile.js 中的 () => {} 是什么意思

What does () => {} mean in gulpfile.js

javascript

gulp

gulp-browser-sync

ES6 箭头函数