引言
随着 JavaScript 变得越来越流行，前端工程师们越来越喜欢使用ES6+语法。ES6+ 代码相比于传统 JavaScript，更加简洁、易读、易用。但是，ES6+ 尚未被所有浏览器支持，使得向下兼容成为了前端开发者需面对的一个挑战。
但是幸运的是，有一个名叫Babel编译器的工具，可以将 ES6+ 代码转换为 ES5（基础 JavaScript）代码，使得代码在所有浏览器上都可以运行。在本篇文章中，我们将会分享如何在 Gulp 中使用 Babel 编译器，以便您更好地工作。
目录
- 安装 Node.js 和 Gulp
- 初始化一个新的项目并配置
gulpfile.js - 安装
gulp-babel和gulp-sourcemaps - 在
gulpfile.js中添加一个新的任务 - 运行
Gulp并测试输出结果
安装 Node.js 和 Gulp
在本文的第一步，我们需要确保您的机器上安装了 Node.js 和 Gulp。如果您不确定 Node.js 是否已经在您的机器上安装过，您可以在终端中运行以下代码：
node -v
如果您的机器上有 Node.js，则您应该看到 Node 的版本号。否则，您应该前往 Node.js 官方网站并且按照指导进行安装。
接下来，我们需要使用 Node.js 的包管理器 npm（已经随 Node.js 安装）来安装 Gulp：
npm install gulp -g
该命令会在全局范围内安装 Gulp。相应地，您可能需要使用管理员权限来运行该命令。
初始化一个新的项目并配置 gulpfile.js
在本文的第二步，我们将使用 npm init 命令初始化一个新的 Node.js 项目。 在您的终端中，进入您想要项目存储的文件夹，并运行以下命令：
npm init
这会询问一些项目信息，例如项目名称、作者、描述等。您可以选择自己喜欢的信息来填写。 完成之后，您应该会看到一个 package.json 文件已经在您的项目内创建好了。
接下来，我们需要配置 gulpfile.js，该文件用于配置和定义 Gulp 的任务。
在您的项目存储文件夹中，创建一个名为 gulpfile.js 的文件：
touch gulpfile.js
然后，打开这个新建的文件。
我们将在下面内容中慢慢地逐步填写 gulpfile.js 文件的内容，以便您能理解文件代码的意义。
-- -------------------- ---- ------- -- --------- ---- -- ----- ---- - ---------------- ----- ----- - ---------------------- ----- ---------- - --------------------------- -- -- ---- -- ------------------ -- -- ---- -- ---- -------------------- ----------------------
在上面的代码中，我们引入了我们所需要的 Gulp 插件，其中包括了一个 gulp-babel 插件，它用于将 ES6+ 代码转换为 ES5 代码。我们已经定义了一个名为 babel 的 Gulp 任务，以便在下一步中将其填写。
最后，我们定义了一个名为 default 的 Gulp 任务，它将在运行 Gulp 时自动执行。在本文中，我们将会让 default 任务调用我们刚刚定义的 babel 任务，以便让 Gulp 将 ES6+ 代码编译成 ES5 代码。
安装 gulp-babel 和 gulp-sourcemaps
在本文的第三步中，我们将安装两个 npm 工具 gulp-babel 和 gulp-sourcemaps，以便 Gulp 能够正常地执行任务。
在终端中输入以下命令，以安装 gulp-babel 和 gulp-sourcemaps：
npm install gulp-babel gulp-sourcemaps --save-dev
该命令会安装两个插件：gulp-babel 用于将 ES6+ 代码转换为 ES5 代码，gulp-sourcemaps用于告诉浏览器源代码位置，这些在编写和维护代码时非常有用。
等待安装完成后，我们继续下一步。
在 gulpfile.js 中添加一个新的任务
在本文的第四步中，我们将会将内容填写到我们在之前定义的空任务 babel 内。以下是 babel 任务的填写内容：
-- -------------------- ---- -------
------------------ -- -- -
------ -----------------------
------------------------
-------------
-------- ---------------------
---
----------------------------
-------------------------
---这段代码中描述了一个名为 babel 的 Gulp 任务。它有以下作用：
- 首先，从
src/**/*.js匹配的所有 JS 文件中读取输入流。 - 在编译之前，使用
gulp-sourcemaps插件初始化 JavaScript 源映射。 - 通过
gulp-babel插件将 ES6+ 代码转换为 ES5 代码。这里使用了 Babel 的@babel/preset-env预设，它能够根据您所使用的特性，自动地决定您需要的转换。 - 将源代码的位置映射到输出代码的位置。
- 最后，将编译后的代码输出到
dist目录。
运行 Gulp 并测试输出结果
在本文的第五步中，我们将启动 Gulp 并查看编译后的输出结果。
在我们的项目文件夹中运行以下代码，以便启动 Gulp 和默认任务：
gulp
Gulp 将开始运行，编译您的 ES6+ 代码，并将编译后的文件输出到 dist 目录。此外，输出中带有与源代码的位置映射的信息，以方便在开发过程中进行调试。
恭喜您，现在您已经成功地使用 Gulp 和 Babel 编译了您的 ES6+ 代码，而且在所有浏览器上都可以运行！
完整代码示例如下：
-- -------------------- ---- -------
-- --------- ---- --
----- ---- - ----------------
----- ----- - ----------------------
----- ---------- - ---------------------------
-- -- ---- --
------------------ -- -- -
------ -----------------------
------------------------
-------------
-------- ---------------------
---
----------------------------
-------------------------
---
-- ----
-------------------- ----------------------请注意，以上示例代码中的 src 和 dist 路径均为例子，您需要根据自己所需更改该路径。
结论
通过本文，我们已经介绍了如何在 Gulp 中使用 Babel 和 gulp-sourcemaps 编译 ES6+ 代码，以便在所有浏览器中都可以运行。我们介绍了以下基本的步骤：
- 在您的机器上安装 Node.js 和 Gulp。
- 初始化新的 Node.js 项目并配置
gulpfile.js。 - 安装
gulp-babel和gulp-sourcemaps。 - 将您的 ES6+ 代码编译为 ES5 代码，并制定输出目录。
- 运行 Gulp 并测试编译后的输出结果。
希望通过这篇文章可以帮助您快速地将 ES6+ 代码编译成 ES5 代码，在您的浏览器中获得更好的兼容性。而如果您想更进一步地学习使用 Gulp、Babel、Grunt 或 webpack 等前端工具，可以考虑加入相关的课程或自学。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67053559d91dce0dc852631c