使用gulp+babel搭建ES6环境前言从信息中我们可以知道ECMAScript2015（简称ES6）已经在2015年发布了，因为使用的浏览器版本用户安装的可能早于ES6的发布，但是今天如果我们在编程中使用ES6的新特性，而浏览器没有同步更新版本，或者新版本的浏览器不兼容ES6的特性，那么浏览器肯定是无法识别我们写的ES6代码的，所以如果想直接写ES6代码在浏览器中执行，结果只能是兼容性问题导致报错。如果浏览器不支持，我们想用ES6语法写JS代码怎么办？针对这个问题，很多团队开发了很多语法分析和转换工具。比较常见的工具有babel、jsx、traceur、es6-shim等，它们的作用是将我们编写的ES6代码转换成浏览器可以识别的JS代码，相当于ES6和浏览器之间的翻译器。到这里进入正题，你已经默认熟悉gulp的语法和用法了。不熟悉的童鞋请移步gulp中文网。创建项目目录myProject/├──app/│├──static/││└──scripts/││└─index.js│└──views/│└─index.html│└──dist/initializenpm初始化npm，因为gulp的运行是基于NodeJS的。执行gulp命令也需要安装相应的模块，所以先用终端进入myProject，然后执行npminit命令，一直回车生成package.json。安装gulp和编译ES6所需的模块用终端进入myProject，分别执行：//既然要使用gulp自动化工具，当然少不了gulp插件的安装1.npminstallgulp--save-开发；//将ES6转为可执行JS代码需要babel转换工具，同时依赖gulp环境运行，所以必须安装gulp-babel插件2.npminstallgulp-babel--save-开发；//babel-preset-env插件，该插件可以根据配置的目标运行环境自动启用所需的babel插件（即动态将ES6代码转换为可执行的JS代码）3.npminstallbabel-preset-env--save-dev;//根据babel文档指引，babel是不需要-core的，但是在实际运行中，如果缺少babel-core，会报找不到模块，安装即可it4.npminstallbabel-core--save-dev;//可选，非翻译ES6插件仅用于压缩5.npminstallgulp-uglify--save-dev;以上五行命令可以简写为npminstallgulpgulp-babelbabel-preset-envbabel-coregulp-uglify--save-dev一行代码输出，然后让它自动安装。安装后package.json内容如下：{"name":"myproject","version":"1.0.0","description":"","main":"gulpfile.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"Kevin","license":"ISC","devDependencies":{"babel-core":"^6.26.0","babel-preset-env":"^1.6.1","gulp":"^3.9.1","gulp-babel":"^7.0.0","gulp-uglify":"^3.0.0"}}构建Gulp任务在myProject目录下新建一个gulpfile.js和.babelrc（注意开头有一个.）。gulp运行时会在项目目录下寻找gulpfile.js文件，如果找不到则报错。同样，babel在编译ES6时，也会在工程目录下查找.babelrc文件。如果找不到，它也会报错。gulpfile.js的内容如下：vargulp=require('gulp'),babel=require('gulp-babel'),uglify=require('gulp-uglify');//创建一个名为jsgulp的任务.task('js',function(){//先获取app/static/scripts下的所有.js文件（**/表示包含所有子文件夹）returngulp.src('app/static/scripts/**/*.js')//TranslateES6codeintoExecutableJScode.pipe(babel())//jscompression.pipe(uglify())//将翻译压缩后的文件输出到dist/static/scripts（如果有没有dist目录，dist目录会自动生成).pipe(gulp.dest('dist/static/scripts'))})//创建一个名为default的任务（以上任务可以不存在，但这个任务必须是可用，否则在终端执行gulp命令会报错)//在终端输入gulp命令，默认执行default任务，执行js任务gulp.task('default',['js']);.babelrc的内容如下：{"presets":["env"]}最后在终端进入myProject目录，执行gulp命令，会生成一个dist目录，里面会包含一个编译好的JS文件.将编译好的文件导入到html中，就可以正常播放了。更完整的gulp自动化配置方案，请参考《使用Gulp构建前端自动化方案》。有什么问题可以留言，我看到会回复的。感谢收看。
