Question

问题：如何在ES6中编写gulp文件，以便我可以使用import代替require并使用=>语法覆盖function() }？

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

gulpfile.js：

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

enter image description here

错误：

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

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

在node_modules/gulp/bin/gulp.js内部我已按照stack中的要求将第一行更改为#!/usr/bin/env node --harmony

Answer 1

是的，您可以使用babel。

确保您已获得最新版本的gulp-cli。

npm install -g gulp-cli

安装babel作为项目的依赖项。

npm install --save-dev babel

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

您的gulpfile可能如下所示：

import gulp from 'gulp';

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

更新Babel 6.0 + 正如Eric Bronniman正确指出的那样，有一些额外的步骤可以让它与最新版本的babel一起使用。以下是这些说明：

再次确保您已获得最新版本的gulp-cli
npm install -g gulp-cli

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

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

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

您的gulpfile.js应该被命名为gulpfile.babel.js

Answer 2

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

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

Answer 3

我使用babel-node和原生gulp。

安装babel和gulp作为devDependencies。
使用ES6语法编写gulpfile.js。
使用命令./node_modules/.bin/babel-node ./node_modules/.bin/gulp运行gulp
在package.json scripts部分，您可以跳过第一个./node_modules/.bin/部分 - babel-node ./node_modules/.bin/gulp。

这个方法的优点是，有一天node.js支持所有ES6功能，有一天你需要选择退出babel运行时，用babel-node替换node。就是这样。

Answer 4

基本上，您需要使用npm安装的内容为gulp，gulp-babel和babel-resent-env，添加＆＃34; env＆＃34;到你的.babelrc预设数组，并使用gulpfile.babel.js文件。

npm install gulp-babel --save-dev

部分答案提及babel-core，babel-preset-es2015等。与Gulp的Babel官方 setup guide 仅限gulp-babel，而gulp-babel具有包含babel-core的依赖项模块，因此您无需单独安装它。

关于预设，您需要使用预设让Babel真正做一些事情，称为 Preset Env ，根据您支持的环境自动确定您需要的Babel插件。

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

和.babelrc档案

{
  "presets": ["env"]
}

Answer 5

如果你正在使用最现代版本的Gulp和Gulp CLI，你可以Gulpfile.babel.js进行操作，默认情况下它会理解和转换你的ES6 gulpfile和BabelJS。

将BabelJS转发器安装在devDependencies下也很重要，因为Gulp：

npm install --save-dev babel

另请注意，要在此上下文中要求gulp，您不必导入index.js，您可以：

import gulp from 'gulp';

Answer 6

我在es6中开发gulpfile代码的步骤：

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
瞧!!!您现在可以在ES6中编写gulp的配置代码。

来源： Using ES6 with Gulp - Mark Goodyear

Answer 7

/* 
 *    Steps
 * 1. Rename your gulpfile.js to gulpfile.babel.js
 * 2. Add babel to your package.json (npm install -D babel)
 * 3. Start writing ES6 in your gulpfile!
 */
 
 import gulp from 'gulp'; // ES6 imports!
 import sass from 'gulp-sass';
 
 const sassOpts = { outputStyle: 'compressed', errLogToConsole: true }; // "let" and "const"!!
 
 gulp.task('sass', () = > { // Arrow functions!!
   gulp.src('./**/*.scss')
    .pipe(sass(sassOpts))
    .pipe(gulp.dest('./'));
 });
 
 gulp.task('default', ['sass'], () => { // Arrow functions!!
   gulp.watch('./src/sass/**/*.scss', ['sass'])
    .on('change', (e) => {  // Arrow functions!!
      console.log(`File ${e.path} was ${e.type}, running Sass task...`); // Template strings and interpolation!!
    });
 });

Answer 8

如果你有最新版本的 gulp 和 node，你可以简单地将 gulpfile.js 重命名为 gulpfile.mjs，它应该可以工作而无需使用 Babel 或任何其他转译器。

.mjs 是 node 使用的一种特殊格式，允许使用 ES 模块。

参考资料：-

可以在es6中写一个gulp文件吗？

8 个答案: