Gulp结合Babel实时编译编译ES6：

编译ES6我们常用到的是Babel，首先我们要保证安装了Babel，具体方法我就不啰嗦了，直接上阮大神的教程：阮一峰Babel入门额教程

其中教程中有一点要强调的地方就是，在全局状态下如果要手动编译整个文件夹下的ES6的话，我们首先先更改package.json文件中的scripts，修改成自己的文件路径和要计划编译后的路径:

 "scripts": {    "build": "babel src/es6 --out-dir dist/js"  },

然后运行npm run build即可

然后我们要做的是怎么利用Gulp实时编译Babel，我们首先要清楚需要Gulp的什么插件：

gulp-babel

代码如下：

const gulp = require('gulp');const babel = require('gulp-babel');gulp.task('es6', () => {    return gulp.src('src/app.js')        .pipe(babel({            presets: ['es2015']        }))        .pipe(gulp.dest('dist'));});

同时我们再写一个watch任务，用来监控src下es6下的js文件有没有更改，如有变动，则马上执行上面的’es6’任务，代码如下：

gulp.task('watch', ['es6'], function() {   gulp.watch(['src/es6/*.js'], ['es6']);});

最后我们再把watch任务添加到default上就大功告成了，完整代码如下：

var gulp = require('gulp'),  babel = require('gulp-babel'),  concat = require('gulp-concat'),  rename = require('gulp-rename'),  jshint = require('gulp-jshint'),  uglify = require('gulp-uglify');// Load pluginsvar $ = require('gulp-load-plugins')();/* es6 */gulp.task('es6', function() {  return gulp.src('src/es6/*.js')    .pipe($.plumber())    .pipe($.babel({      presets: ['es2015']    }))    .pipe(gulp.dest('dist/js/'));});gulp.task('watch', ['es6'], function() {   gulp.watch(['src/es6/*.js'], ['es6']);});gulp.task('default', ['watch']);

如果大家对gulp不熟的话，可以参考下面的两个博客：

Gup各个插件的用途

Gulp基础教程