是否可以在 es6 中编写 gulpfile？

Question

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

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

---

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

---

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

在node_modules/gulp/bin/gulp.js 内，我已将第一行更改为#!/usr/bin/env node --harmony，正如stack 中所要求的那样

Answer 1

如果你有最新版本的 gulp & node，你可以简单地创建一个 gulpfile 为gulpfile.mjs 而不是gulpfile.js，它应该可以在不需要使用 Babel 或任何其他转译器的情况下工作。

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

参考：-

• https://nodejs.org/api/esm.html#esm_enabling
• https://nodejs.org/api/packages.html#packages_determining_module_system

示例：-

// Filename: gulpfile.mjs

import gulp from 'gulp';
export default task;

function task()
{
    return (
        gulp.src(`./src/js/**/*.js`)
        .pipe(gulp.dest(`./dist/Static/js`)
    );
}

Answer 2

我也遇到了同样的问题
解决如下：

• Windows 10
• 节点版本：14.15.4
• npm 版本：6.14.10
• gulp 版本：4.0.2
• 使用纱线 v1

1. 将 gulpfile.js 重命名为 gulpfile.babel.js
2. 将这些包添加为开发依赖项：

"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/register": "^7.12.10",
"gulp-babel": "^8.0.0",

1. 添加了 babel.config.json

{
 "presets": [
 [
     "@babel/preset-env",
     {
        "targets": {
            "ie": "10",
            "edge": "17",
            "firefox": "60",
            "chrome": "70",
            "safari": "11.1"
         }
     }
   ]
 ]
}

4. 最后我删除了 yarn.lock 文件和 node_modules 文件夹并安装了所有的包。
   yarn install

这就是我的 gulpfile.babel.js 文件的样子：

import { src, dest, parallel, series, watch } from 'gulp';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import concat from 'gulp-concat';
import postcss from 'gulp-postcss';
import replace from 'gulp-replace';
import sass from 'gulp-sass';
import { init, write } from 'gulp-sourcemaps';
import uglify from 'gulp-uglify';
import babel from "gulp-babel";

//....

const _default = series(
    parallel(scssTask, jsTask),
    cacheBustTask,
    watchTask
);
export { _default as default };

注意：
yarn gulp 命令运行正常，但我仍然收到警告：
Requiring external module @babel/register

Answer 3

/* 
 *    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 4

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

npm install gulp-babel --save-dev

部分答案提到了babel-core、babel-preset-es2015等。Babel官方的setup guide用Gulp是只用gulp-babel，而gulp-babel有依赖模块包括@ 987654333@ 所以你不需要单独安装它。

关于预设，你需要使用一个预设来让 Babel 真正做点什么，叫做 Preset Env，它会根据你支持的环境自动确定你需要的 Babel 插件。

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

在.babelrc 文件中

{
  "presets": ["env"]
}

Answer 5

请注意，您现在可以在 Node.js v4.0.0 中使用许多/大多数 ES6 功能而无需 babel。但是显然仍然不支持“导入”。见：https://nodejs.org/en/docs/es6/

编辑：NodeJS 5.0 默认支持大多数流行的 ES6 功能（包括解构和扩展）（请参阅上面的链接。）就目前而言，唯一缺少的主要功能似乎是 ES6 模块我可以告诉。

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

的 gulp 配置文件

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

来源： Using ES6 with Gulp - Mark Goodyear

Answer 7

是的，您可以使用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 8

我使用babel-node 和原生gulp。

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

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

Answer 9

如果您使用的是最新版本的 Gulp 和 Gulp CLI，您只需执行 Gulpfile.babel.js，它就会默认使用 BabelJS 理解和转译您的 ES6 gulpfile。

像 Gulp 一样，将 BabelJS 转译器安装在 devDependencies 下也很重要：

npm install --save-dev babel

还要注意，在这种情况下需要 gulp，您不必导入 index.js，您可以：

import gulp from 'gulp';