如何使用gulp进行babel编译呢，只需下面几步简单的操作就可以实现了！！！

最新推荐文章于 2024-08-25 08:10:08 发布

帅帅邬同学

最新推荐文章于 2024-08-25 08:10:08 发布

阅读量672

点赞数 2

分类专栏：前端面试 gulp 学习笔记文章标签： gulp gulp-babel gulp编译ES6代码 babel编译前端自动化构建工具

本文链接：https://blog.csdn.net/weixin_44586544/article/details/107959912

版权

学习笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

前端面试

78 篇文章 1 订阅

订阅专栏

gulp

7 篇文章 0 订阅

订阅专栏

使用gulp进行babel编译

第一步：

cnpm i gulp-babel @babel/core @babel/preset-env -D

第二步：
书写gulpfile.js文件：
代码如下：

// 要想编译ES6代码，也就是让gulp-uglify能够认识ES6代码。
// 就需要babel，需要 cnpm i gulp-babel @babel/core @babel/preset-env 这三个东西。
// 注意gulp是支持ES6的，只是gulp-uglify不认识ES6，所以才需要进行编译。
const gulp=require('gulp');
const uglify=require('gulp-uglify');
// const concat=require('gulp-concat');
const rename=require('gulp-rename');
const babel=require('gulp-babel');  

gulp.task('js', ()=>{
  return gulp
    .src(['./src/js/**/*.js'])
    //.pipe(concat('bundle.min.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/js'));
});

gulp.task('default', ['js']);