es6转es5:gulp+babel

跟風遠走 提交于 2020-01-28 13:31:41

1:安装插件

在命令行中定位到根目录

安装全局 Gulp
npm install -g gulp
安装项目中使用的 Gulp
npm install --save-dev gulp

安装 Gulp 上 Babel 的插件
npm install --save-dev gulp-babel

安装 Babel 上将 ES6 转换成 ES5 的插件
npm install --save-dev babel-preset-es2015

安装 Gulp 上 uglify 压缩插件
npm install --save-dev gulp-uglify

2.Gulp配置

在项目根目录新建 .babelrc ,内容为:
{
  "presets": ["es2015"]
}
在项目根目录新建 gulpfile.js,内容为:

  var gulp = require('gulp');
  var babel = require('gulp-babel');


  gulp.task("toes5", function () {
  return gulp.src("src/js/**/*.js")// ES6 源码存放的路径
       .pipe(babel())
       .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
        });

       gulp.task('auto',function(){
              gulp.watch('src/js/index.js',['toes5']);
       })

执行:

根据 gulpfile.js 的定义,转化、压缩可以单独执行,也可以合并后自动执行。

 

项目结构:

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!