ES6 初体验 —— gulp+Babel 搭建ES6环境

　　ES6已经火了好久了，我却一直没有在项目中尝试过使用ES6写代码，只是写过几个Demo，在大型项目中使用ES6这件事，我一直不太敢做。最近公司要求做一个小的H5活动专题，我想不如就在这个小项目中使用ES6，一方面积累一些经验为大型项目做准备。另一方面小型的活动专题不涉及后期维护，从成本上我并没有冒太大的风险。下面我简单介绍一下我搭建的ES6 环境。

　　虽然移动平台是webkit大行其道，并且webkit对ES6支持的还不错，但是我并不打算webkit内核裸跑ES6。我选择了预编译的方案——babel ，我编写的是ES6的代码，但是页面上仍然是ES5的代码。在网上查阅了不少文章结合我现在的开发环境我打算使用gulp-babel这个插件。下面我们一起来看一下：

需要哪些依赖？

　　下面是我的package.json中的devDependencies 属性：

"devDependencies": {
    "babel-preset-es2015": "^6.5.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp": "^3.9.1",
    "gulp-jshint": "^2.0.0",
    "gulp-concat": "^2.6.0",
    "gulp-uglify": "^1.4.1",
    "gulp-util": "^3.0.1"
  }

　　npm install 后我们就可以看到我们的依赖都安装到了工程文件夹下面。

怎么配置？

　　然后是在gulp中做ES6的配置了gulpfile.js 。 我定义了一个名为“es6”的任务负责将目录src/es6js/   下面所有的js文件通过babel编译成ES5的文件并输出到dist/ztimages  文件夹下面

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  rename = require('gulp-rename'),
  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify');


// Load plugins
var $ = require('gulp-load-plugins')();

/* es6 */
gulp.task('es6', function() {
  
  return gulp.src('src/es6js/*.js')
    .pipe($.plumber())
    .pipe($.babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist/ztimages/'));
});

　　我们有了任务，但是怎么执行任务呢？ 在命令行工程目录下输入gulp es6 就可以执行这个任务了。但是我们不能每写一行代码就手动“执行”一下。这样也太麻烦了。我们可以配置一个监听任务。

//监听文件修改
gulp.task('watch', ['es6'], function() {
  gulp.watch(['src/js/earth.js'], ['es6']);
});

　　类似的我们也可以加入LESS的文件监听。

　　在命令行工程目录下输入gulp watch就可以执行这个监听任务了。

总结：

　　这样一个简单的ES6环境就搭建好了。当然还有好多其他的方法，我仅仅先介绍一个比较容易上手的方法给大家。