javascript es6可以写gulpfile吗？

Is it possible write a gulpfile in es6?

提问by Matthew Harwood

Question:How can I write my gulp file in ES6 so I can use importinstead of requireand use =>syntax over function()?

问题：如何在 ES6 中编写我的 gulp 文件，以便我可以使用import而不是require使用=>语法 over function()？

I can use io.js or node any version.

我可以使用 io.js 或 node 任何版本。

---

---

gulpfile.js:

gulpfile.js：

import gulp from "./node_modules/gulp/index.js";
gulp.task('hello-world', =>{
    console.log('hello world');
});

Errors:

错误：

import gulp from "./node_modules/gulp/index.js";
^^^^^^
SyntaxError: Unexpected reserved word

---

---

gulp.task('hello-world', =>{
                         ^^
SyntaxError: Unexpected token =>

Inside the node_modules/gulp/bin/gulp.jsi've changed the first line to #!/usr/bin/env node --harmonyas asked in this stack

在node_modules/gulp/bin/gulp.js我已将第一行更改#!/usr/bin/env node --harmony为此堆栈中的要求

回答by brbcoding

Yes, you can by using babel.

是的，您可以使用babel。

Make sure you've got the latest version of the gulp-cli.

确保您拥有最新版本的 gulp-cli。

npm install -g gulp-cli

npm install -g gulp-cli

Install babel as a dependency of the project.

安装 babel 作为项目的依赖。

npm install --save-dev babel

npm install --save-dev babel

Rename gulpfile.jsto gulpfile.babel.js

重命名gulpfile.js为gulpfile.babel.js

Your gulpfile might look something like this:

您的 gulpfile 可能如下所示：

import gulp from 'gulp';

gulp.task('default', () => {
  // do something
});

Update for Babel 6.0+As correctly pointed out by Eric Bronniman, there are a few extra steps involved in getting this to work with the latest version of babel. Here are those instructions:

Babel 6.0+ 的更新正如Eric Bronniman正确指出的那样，要使其与最新版本的 babel 配合使用还需要一些额外的步骤。以下是这些说明：

Again, make sure you've got the latest version of gulp-cli
npm install -g gulp-cli

再次确保你有最新版本的 gulp-cli
npm install -g gulp-cli

Then install gulp, babel core, and the es2015 presets
npm install --save-dev gulp babel-core babel-preset-es2015

然后安装 gulp、babel core 和 es2015 预设
npm install --save-dev gulp babel-core babel-preset-es2015

Then, either add the following to a .babelrc file or to your package.json

然后，将以下内容添加到 .babelrc 文件或 package.json

"babel": {
  "presets": [
    "es2015"
  ]
}

Your gulpfile.jsshould be named gulpfile.babel.js

你gulpfile.js应该被命名gulpfile.babel.js

回答by thom_nic

Note you can now use many/most ES6 features in Node.js v4.0.0 without babel. However apparently 'import' is still not supported. See: https://nodejs.org/en/docs/es6/

请注意，您现在可以在没有 babel 的情况下在 Node.js v4.0.0 中使用许多/大多数 ES6 功能。然而，显然仍然不支持“导入”。请参阅：https: //nodejs.org/en/docs/es6/

Edit: Most of the popular ES6 features (including destructuring and spread) are supported by default in NodeJS 5.0 (see above link.) The only major missing feature appears to be ES6 modules as far as I can tell.

编辑：NodeJS 5.0 默认支持大多数流行的 ES6 功能（包括解构和传播）（见上面的链接）。据我所知，唯一缺少的主要功能似乎是 ES6 模块。

回答by Junle Li

I use babel-nodeand native gulp.

我使用babel-node和本机gulp.

1. Install babeland gulpas devDependencies.
2. Write gulpfile.jswith ES6 syntax.
3. Use command ./node_modules/.bin/babel-node ./node_modules/.bin/gulpto run gulp
4. In package.json scriptssection, you can skip the first ./node_modules/.bin/part - as babel-node ./node_modules/.bin/gulp.

1. 安装babel并gulp作为 devDependencies。
2. gulpfile.js使用 ES6 语法编写。
3. 使用命令./node_modules/.bin/babel-node ./node_modules/.bin/gulp运行 gulp
4. 在 package.jsonscripts部分，您可以跳过第一./node_modules/.bin/部分 - as babel-node ./node_modules/.bin/gulp。

The advantage of this appoach is, one day when the node.js support all ES6 features one day, all you need to opt-out babel runtime is to replace babel-nodewith node. That is all.

这种方法的优点是，有一天当 node.js 支持所有 ES6 特性时，你需要选择退出 babel 运行时的所有内容就是替换babel-node为node. 就这些。

回答by zhe

Basically, what you need to install using npmis gulp, gulp-babeland babel-resent-env, add "env" to your .babelrcpresets array, and use a gulpfile.babel.js file.

基本上，你需要安装使用的是什么npm是gulp，gulp-babel和babel-resent-env，加上“ENV”到你.babelrc预设阵列，并使用gulpfile.babel.js文件。

npm install gulp-babel --save-dev

Some of the answers mentioned babel-core, babel-preset-es2015, etc. The Babel official setup guidewith Gulp is to use gulp-babelonly, while gulp-babelhas dependencies modules including babel-coreso you don't need to install it separately.

提到的一些答案babel-core，babel-preset-es2015等官方巴贝尔设置指南与咕嘟咕嘟是使用gulp-babel而已，而gulp-babel具有依赖性模块，包括babel-core，所以你不需要单独安装。

About preset, you need to use a preset to make Babel actually do something, which is called Preset Envthat automatically determines the Babel plugins you need based on your supported environments.

关于preset，你需要使用一个preset来让Babel真正做一些事情，叫做Preset Env，它会根据你支持的环境自动确定你需要的Babel插件。

npm install babel-preset-env --save-dev 

and in .babelrcfile

并在.babelrc文件中

{
  "presets": ["env"]
}

回答by BTC

If you're using the most modern version of Gulp and the Gulp CLI, you can just do Gulpfile.babel.jsand it will understand and transpile your ES6 gulpfile with BabelJS by default.

如果您使用的是最新版本的 Gulp 和 Gulp CLI，您可以这样做Gulpfile.babel.js，默认情况下它会理解并使用 BabelJS 编译您的 ES6 gulpfile。

It is also important to have the BabelJS transpiler installed under devDependenciesas is Gulp:

将 BabelJS 转译器安装在devDependenciesGulp下也很重要：

npm install --save-dev babel

Also note that to require gulp in this context, you do not have to import the index.js, you can just:

另请注意，在这种情况下需要 gulp，您不必导入index.js，您只需：

import gulp from 'gulp';

回答by rash.tay

Steps I followed for developing the code for gulpfile in es6:

我在 es6 中为 gulpfile 开发代码所遵循的步骤：

• npm install gulp && sudo npm install gulp -g.
• Please make sure that you you are using the updated version of Gulp. The current version at the time of writing this answer was 3.9.1. To check which version of gulp is installed, type gulp -v
• npm install babel-core babel-preset-es2015-without-strict --save-dev
• Type touch .babelrcin the terminal

• In the .babelrc file, add this code

  { "presets": ["es2015-without-strict"] }

• Created the gulp config file with the name gulpfile.babel.js

• Voila!!! You can now write the config code for gulp in ES6.

• npm install gulp && sudo npm install gulp -g.
• 请确保您使用的是 Gulp 的更新版本。撰写此答案时的当前版本是3.9.1。要检查安装了哪个版本的 gulp，请键入gulp -v
• npm install babel-core babel-preset-es2015-without-strict --save-dev
• 输入touch .babelrc终端

• 在 .babelrc 文件中，添加此代码

  { "presets": ["es2015-without-strict"] }

• 创建名为gulpfile.babel.js 的 gulp配置文件

• 瞧！！！您现在可以在 ES6 中为 gulp 编写配置代码。

Source:Using ES6 with Gulp - Mark Goodyear

资料来源：在 Gulp 中使用 ES6 - Mark Goodyear