Gulp使用ES6语法

在Node.js版本4之后，我们已经可以使用ES6（ES2015）语法并且不使用Babel包。但是Gulp模块不支持，所以我们仍然使用“require()”方式；如果想要支持需要借助Babel包。

在Gulp 3.9+版本后已经可以使用ES6。

首先、检查Gulp版本（gulp -v),如果低于要求版本可以使用命令更新到最新版本。

npm install gulp && npm install gulp -g

其次、需要安装Babel 6+及Babel 支持ES6的插件

npm install babel-core babel-preset-es2015 --save-dev

设置完成之后需要在项目的根目录中创建.babelrc(Babel的配置文件)，内容如下：

{
  "presets": ["es2015"]
}

然后，将原来的gulpfile.js更名为gulpfile.babel.js（测试过如果不更改名称则执行不成功的)

接下来我们可以通过Babel使用ES语法编写gulp任务了

'use strict';


import gulp from 'gulp';
import webpack from 'gulp-webpack';
import rename from 'gulp-rename';
import named from 'vinyl-named';
import path from 'path';
import del from 'del';


/**
 * 定义目录对象
 * @type {Object}
 */
const dirs = {
root: path.resolve(__dirname),
src: 'src',
dest: 'build'
};


/**
 * webpack配置对象
 * @type {Object}
 */
const webpackConf = {
webpak_config: path.resolve(dirs.root, 'webpack.config.js')
}
gulp.task('default', () => {
console.info("this is a test gulp task:" + webpackConf.webpak_config);
});

注：原博客地址https://markgoodyear.com/2015/06/using-es6-with-gulp/