Javascript 是否可以在es6中编写一个gulpfile？

问题：如何在ES6中编写我的gulp文件，以便使用

导入

而不是

要求

，并在

函数（）上使用
=>
语法

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


gulpfile.js:

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


错误：

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


在
节点中_modules/gulp/bin/gulp.js
我将第一行更改为
#/usr/bin/env node--harmony
如本文所述
如果您使用的是最新版本的Gulp和Gulp CLI，您只需执行
Gulpfile.babel.js
即可，默认情况下，它将使用BabelJS理解并传输您的ES6 Gulpfile文件

在
devDependencies
下安装BabelJS transpiler也很重要，因为它是Gulp：

npm install --save-dev babel

还要注意的是，在这种情况下，要想要求吞咽，您不必导入
index.js
，只需：

import gulp from 'gulp';

是的，你可以使用

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

npm安装-g gulp cli

安装babel作为项目的依赖项

npm安装--保存dev babel

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

您的gulpfile可能如下所示：

import gulp from 'gulp';

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

更新巴别塔6.0+
正如正确指出的那样，在使用最新版本的babel时，需要执行一些额外的步骤。以下是说明：

再次确保您拥有最新版本的gulp cli

npm安装-g gulp cli

然后安装gulp、babel core和es2015预设

npm安装——保存开发人员gulp babel core babel-preset-es2015

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

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

您的
gulpfile.js
应命名为
gulpfile.babel.js
注意，现在您可以在Node.js v4.0.0中使用许多/大多数ES6功能，而无需使用babel。然而，显然“导入”仍然不受支持。见：

编辑：NodeJS 5.0默认支持大多数流行的ES6功能（包括分解和扩展功能）（请参见上面的链接）。据我所知，唯一缺少的主要功能似乎是ES6模块
 我使用
babel节点
和原生
gulp

安装
babel
和
gulp
作为附件
使用ES6语法编写
gulpfile.js
使用命令
/node\u modules/.bin/babel node./node\u modules/.bin/gulp
运行gulp
在package.json
scripts
部分中，您可以跳过第一个
/node\u modules/.bin/
部分-作为
babel节点/node\u modules/.bin/gulp
这种方法的优点是，有一天node.js支持所有ES6功能时，您只需选择退出babel运行时，就可以用
节点
替换
babel节点
。仅此而已。
在es6中开发gulpfile代码时，我遵循了以下步骤：


npm安装gulp&sudo npm安装gulp-g
请确保您使用的是更新版本的Gulp。
撰写此答案时的当前版本为3.9.1。要检查安装了哪个版本的gulp，请键入
gulp-v
npm安装巴别塔核心巴别塔-preset-es2015-WITH-strict-保存开发版本
在终端中键入
touch.lrc
在.babelrc文件中，添加以下代码

{
“预设”：[“es2015无严格要求”]
}

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

瞧！！！现在可以在ES6中编写gulp的配置代码


来源：
基本上，您需要使用
npm
安装的是
gulp
，
gulp babel
和
babel resent env
，将“env”添加到
的babelrc
预设数组中，并使用gulpfile.babel.js文件

npm install gulp-babel --save-dev

提到的一些答案是
babel-core
，
babel-preset-es2015
，等等。babel官方与Gulp一起使用的是
Gulp-babel
，而
Gulp-babel
具有依赖模块，包括
babel-core
，因此您无需单独安装

关于预设，您需要使用预设使Babel实际执行某些操作，这称为，它根据您支持的环境自动确定您需要的Babel插件

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

在
.babelrc
文件中

{
  "presets": ["env"]
}

我刚刚遇到了同样的问题，

解决方法如下：


视窗10
节点版本：14.15.4
npm版本：6.14.10
大口喝版本：4.0.2
使用纱线v1

将gulpfile.js重命名为gulpfile.babel.js
将这些包添加为DevDependence：
“@babel/cli”：“^7.12.10”，
“@babel/core”：“^7.12.10”，
“@babel/preset env”：“^7.12.11”，
“@babel/register”：“^7.12.10”，
“大口巴别塔”：“^8.0.0”，

添加了babel.config.json
{
“预设”：[
[
“@babel/preset env”，
{
“目标”：{
“ie”：“10”，
“边缘”：“17”，
“firefox”：“60”，
“铬”：“70”，
“safari”：“11.1”
}
}
]
]
}

最后，我删除了warn.lock文件和node_modules文件夹，并安装了所有软件包。

纱线安装
这是我的gulpfile.babel.js文件的外观：

从'gulp'导入{src、dest、parallel、series、watch}；
从“autoprefixer”导入autoprefixer；
从“cssnano”导入cssnano；
从“大口海螺”进口海螺；
从“gulp PostCs”导入PostCs；
从“吞咽替换”导入替换；
从“吞咽式sass”导入sass；
从“gulp sourcemaps”导入{init，write}；
从“咕噜咕噜”中输入丑；
从“大口巴别塔”导入巴别塔；
//....
有限公司
{
  "presets": ["env"]
}

/* 
 *    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!!
    });
 });