【Gulp】利用gulp将ES6转化ES5

1.创建Gulp项目

在项目目录下建立文件gulpfile.js，.babelrc，app目录/es6.js ，dist目录
注：gulpfile.js，.babelrc 必须是这两个文件名

2.初始化

$ npm init

3.安装插件

安装gulp

$ cnpm install gulp --save-dev

安装gulp-babel，babel-core 和babel-preset-es2015

$ cnpm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev

注：gulp-babel版本不能超过8.0.0，否则会error

4.项目文件内容

.babelrc文件中写入

{
  "presets": ["es2015"]  
}

gulpfile.js文件中写入

const gulp = require('gulp'),  
  babel = require('gulp-babel');  

gulp.task('es6',  () => {  
  return gulp.src('app/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'));
});

es6.js文件中写入

let name = "hello world";  
console.log(name);  

5.es5的进行转化

在命令行中输入命令

gulp es6

在dist下面找到转化为es5文件内容

"use strict";

var name = "liuliu";
console.log(name);

一般利用gulp创建项目的目录结构
在根目录下再添加一个 .babelrc文件