想体验ES6语法？那用gulp+Babel来搭建ES6环境吧~

参考：​​ES6初体验——gulp+Babel搭建ES6环境​​　　​​gulp-load-plugins模块化管理插件​​

　　那至于怎么使用gulp构建工具这一问题这里就略过咯（可以参考我之前发过的有关gulp的文章进行学习）。
　　在讲如何使用gulp来搭建ES6环境之前，先来介绍一下一个有用的插件——gulp-load-plugins（模块化管理插件）。
　　当然，下面这里其实也是可以跳过的啦。就当普及知识，如果已经知道，可以直接跳过。
　　先来看看我们在没使用该插件之前是如何做的吧。一般情况下，gulpfile.js中的模块需要一个个加载。如：

var gulp = require('gulp'),
    jshint = require('gulp-jshint'), // 校验js的工具
    uglify = require('gulp-uglify'), // 压缩js
    concat = require('gulp-concat'); // 合并js

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

　　上述文件中，我们需要require gulp模块外，还要引入另外的三个模块。当模块数量更多时，这种加载的写法显得比较麻烦。这时候gulp-load-plugins模块的出现正是要解决这样的问题——可以加载package.json文件中的所有的gulp模块。
　　那使用gulp-load-plugins的模块后，上述文件将改写为如下。
　　这里先假设package.json文件的依赖如下：

{
    //...
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-concat": "^2.6.0",
        "gulp-jshint": "^2.0.4",
        "gulp-load-plugins": "^1.1.0",
        "gulp-uglify": "^1.4.1",
        "jshint": "^2.9.4"
    }
}

　　gulpfiles.js中的写法会是这样：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

　　直接不用写那么多require语句啦，统一使用如plugins这样的变量直接调用。

搭建ES6环境

　　都讲了这么久了，还没来重头戏呀。这不，说起这个搭建ES6环境。那么package.json中的依赖是这样的（使用到上述提到的gulp-load-plugins，其实也可以不用；还有将es6语法转为es5的gulp-babel插件）：

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

　　使用命令(c) npm install就可以安装到当前项目所有依赖的模块了。
　　那么gulpfile.js配置文件应该长成什么样呢？

/**
 * Created by DreamBoy on 2016/12/14.
 */
/**
 * 出现如下错误：
 * Gulp Error: Cannot find module 'jshint/src/cli'
 * 请执行：npm install --save-dev jshint gulp-jshint
 */

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')();

var SRC_DIR = './src/**/*.js';
var DIST_DIR = './dist/';

/* es6 */
gulp.task('es6', function() {

    return gulp.src(SRC_DIR)
        .pipe($.plumber())
        .pipe($.babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest(DIST_DIR));
});

/* es6-build */
gulp.task('es6-build', function() {

    return gulp.src(SRC_DIR)
        .pipe($.plumber())
        .pipe($.babel({
            presets: ['es2015']
        }))
        .pipe($.jshint())
        .pipe($.jshint.reporter('default'))
        .pipe($.uglify())
        .pipe($.concat('build.js'))
        .pipe(gulp.dest(DIST_DIR));
});

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

　　上述文件中，最基本的任务为es6任务了，这个任务非常的“单纯”——将src目录下的所有.js文件由es6语法转为es5，并将生成的文件放置在dist目录下。

　　而任务 es6-build 除了做es6任务的事外，还就生成的js文件进行语法的校验、压缩、合并为一个文件build.js，最后存放在dist目录。

　　任务watch则监测src目录.js文件的变化，当文件发生变化时，调用es6任务。

　　那么简单的目录结构可能长这样：

　　在es6-01.js中写一段es6的代码，如：

export function sum(x, y) {
    return x + y;
}
export var pi = 3.141593;

　　使用命令行，执行gulp es6，将会在dist生成对应的文件。
（END）