編譯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 plugins
var $ = 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不熟的話，可以參考下面的兩個部落格：