How convert .jsx to .js with Gulp and Babel?

要使用 Gulp 和 Babel 将 .jsx 文件转换为 .js 文件，你需要执行以下几个步骤：

1. 安装 Node.js：确保你的系统上安装了 Node.js 和 npm（Node.js 的包管理器）。可以从 Node.js 官方网站 下载并安装。

2. 创建项目并初始化：在你的项目根目录下，运行以下命令来初始化 npm 并创建 package.json 文件。

   sh
   npm init -y

3. 安装 Gulp：安装 Gulp CLI（命令行工具）和本地 Gulp 到你的项目中。

   sh
   npm install --save-dev gulp-cli
   npm install --save-dev gulp

4. 安装 Babel：安装与 Babel 相关的依赖包，包括核心库、预设和 Gulp 插件。

   sh
   npm install --save-dev @babel/core @babel/preset-react @babel/preset-env gulp-babel

   @babel/preset-react 是用于转换 JSX 的 Babel 预设，而 @babel/preset-env 是用于将 ES6+ 转换为向后兼容的 JavaScript。

5. 创建 Gulp 配置文件：在项目根目录下创建一个名为 gulpfile.js 的文件，并配置 Gulp 任务以使用 Babel 进行转换。

   在 gulpfile.js 中输入以下代码：

   javascript
   const gulp = require('gulp');
   const babel = require('gulp-babel');
   
   // 创建 Gulp 任务
   gulp.task('jsx-to-js', () => {
     // 指定要转换的源文件
     return gulp.src('src/**/*.jsx')
       // 初始化 sourcemaps
       .pipe(sourcemaps.init())
       // 通过 Babel 进行转换
       .pipe(babel({
         presets: ['@babel/preset-env', '@babel/preset-react']
       }))
       // 写入 sourcemaps
       .pipe(sourcemaps.write('.'))
       // 指定输出目录
       .pipe(gulp.dest('dist'));
   });
   
   // 默认任务，当你运行 `gulp` 命令时执行
   gulp.task('default', gulp.series('jsx-to-js'));

6. 运行 Gulp 任务：在终端或命令行中运行以下命令来执行你的 Gulp 任务，这样 .jsx 文件就会被转换成 .js 文件，并被输出到指定的目录。

   sh
   gulp

现在，你的 .jsx 文件应该已经被转换为 .js 文件，并且保存在了 dist 目录中。

确保你的 .jsx 文件位于 src 目录中，因为这是上面 Gulp 任务中设置的默认源文件目录。如果你的 .jsx 文件存放在不同的目录中，需要将 gulpfile.js 中的 gulp.src('src/**/*.jsx') 部分改为相应的目录。

如果你的项目有其他需要，比如需要支持更多的 JavaScript 特性或者集成其他 Gulp 插件，你可能需要按需安装其他 Babel 插件或者配置选项。